1.創建組件：在檔案夾右鍵單擊 選擇components， 寫新建檔案夾的名稱，里面有四個檔案，
2.參考組件的方式：區域：
// 自己的json檔案
{ "usingComponents": { "my-test1": "/components/test/test" } }
全域：
app.json檔案里
"usingComponents": { "my-test2": "/components/test2/test2" }
3.組件與頁面的區別：
- 組件的 .json 檔案中需要宣告 “component”: true 屬性
- 組件的 .js 檔案中呼叫的是 Component() 函式
- 整個程式啟動呼叫的是 App()
- 某個頁面的渲染呼叫的是 Page()
- 某個組件的渲染呼叫的是 Component()
- 組件的事件處理函式需要定義到 methods 節點中
4.組件的樣式隔離：組件魚頁面之間不會相互影響 (只有class選擇器才不會影響)[id，屬性，標簽會影響]
可以設定styleIsolation屬性修改樣式:
// 在組件的.js 檔案中新增加如下配置
Component({
options: {
/// apply-shared: // 代表頁面wxss樣式將影響自定義組件
///shared: // 代表雙向的影響
styleIsolation: 'isolated' // 默認值isolated: 代表啟動樣式隔離
}
})
// 或在組件的.json 檔案中新增加如下配置
{
"styleIsolation": "isolated"
}
5.組件的資料屬性和方法:data中定義資料，methods中定義函式和自定義方法，properties中定義組件對外屬性
Components({
// 屬性定義
properties:
{
// 完整定義 屬性的方式【當需要指定屬性默認值時，建議使用此方式】
max: {
// 屬性值的資料型別 type: Number,
// 屬性值的默認值
value: 10
},
// 簡化定義 屬性的方式
max: Number
}
})
<my-test1 max="10"></my-test1>
// ****************子組件*********
/*** 組件的方法串列 */
methods: {
addN1 () {
/*** 如果 n1 大于 max的值 ，不允許再繼續增加 */
if (this.data.n1 >= this.properties.max)
return wx.showToast({
title: '已經是最大值了哦...',
icon: 'none'
})
this.setData({
n1: this.data.n1 + 1
})
}
},
6.properties與data的區別：如果要修改 properties 的資料, 最好通過子組件通信給父組件的方式實作
鏈接： 子組件通信修改父組件的值
簡單來講就是： this.triggerEvent('事件名稱', {num: num})
7.資料監聽：
// 0000000000000000000000監聽數值的變化
Components({
// observers: 觀察者
observers: {
'欄位A， 欄位B': function(欄位A， 欄位B) {
// do something 使用setdata 欄位A+欄位B
}
})
// 11111111111111111111監聽單個和多個屬性的變化
Components({
// observers: 觀察者
observers: {
//'物件.屬性A， 物件.屬性B':
function(屬性A的新值， 屬性B的新值) {
// 觸發此偵聽器的 3 種情況：
// 【為屬性A賦值】：使用setData 設定this.data.物件.屬性A 時觸發
// 【為屬性B賦值】：使用setData 設定this.data.物件.屬性B 時觸發
// 【為物件賦值】：使用setData 設定this.data.物件 時觸發
}
})
// 22222222222222222使用通配符方式
observers: {
'_rgb.**': //**表示全部的屬性
function (obj) {
this.setData({
fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
})
}
}
8.純數字欄位提高性能:
Component({
options: {
// 指定所有_開頭的資料欄位為 純資料欄位
pureDataPattern: /^_/
},
data: {
a: true, // 普通資料欄位
_b: true // 純資料欄位 }
})
9.組件的生命周期：
重要的三個生命周期函式：
1.created--------不能呼叫setData，應用于組件的this添加一些自定義屬性欄位
2.attached--------組件完全初始化完畢，進入頁面節點樹之后.(可以發送請求)
3.detached-------離開頁面節點樹之后，清理性作業
10.組件所在頁面的生命周期:
10.自定義組件的插槽：
注意點： 自定義組件只允許進行一個占位符，
<!-- 組件的封裝者 -->
<view class="wrapper">
<view>這里是組件的內部節點</view>
<!-- 對于不確定的內容，可以使用<slot> 進行占位， 具體內容由組件的 使用者決定 -->
<slot></slot>
</view>
<!-- 組件的使用者 -->
<component-tag-name>
<!-- 這部分內容將被放置在組件的 <slot>的位置上 -->
<view>這里是插入到組件slot中的內容</view>
</component-tag-name>
啟用多個插槽： 要取名字
Component({
options: {
multipleSolts: true
// 在組件定義時的選項中啟用多 slot支持
},
properties: {
/* ...*/
},
methods: {
/* ...*/
}
})
11.父子通信：
1.屬性系結： 父向子傳值------只能是資料------JSON兼容格式
count="{{count}}" // 這是屬性系結
// 子組件使用properties接收(.js檔案)
properties: {
count: Number
}
2.事件系結： 子向父傳值------任意資料
// 父組件定義countAdd方法：
countAdd () {
// dosomething.....
}
// 父組件的xwml：自定義事件
<son bind:addName="countAdd"></son>
// 子組件里.js
methods: {
this.triggerEvent("addName",{value: this.properties.count})
}
// 父組件.js
countAdd (e) {
this.setDate({
count: e.detail.value
})
}
3.獲取組件實體： 父組件使用----this.selectComponent（“class或者·id選擇器”）獲取子組件實體物件 (訪問任意資料和方法)
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">獲取子組件實體</button>
//父組件的js檔案 按鈕的tap事件處理函式
getChild() {
// 切記下面的引數不能傳遞標簽選擇器，不然回傳的是null
// 也可以傳遞ID選擇器
const child = this.selectComponent('.customA')
// 呼叫子組件的setData方法，修改count的值，
child.setData({
count: this.data.count + 1
})
child.addCount()
// 直接呼叫子組件的addCount方法，該方法在child實體物件的 __proto__上可以訪問到該方法
}
12.behaviors: 組件代碼共享----
// 創建 myBehavior.js
module.exports = Behavior({
properties: {},
data: { username: 'zs' },
methods: {}
})
// 使用
const myBehavior = require("/路徑/")
Component({
behaviors: [myBehavior]
})
// wxml
<view>{{ username }}</view>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/274885.html
標籤：其他