目錄
一、創(chuàng)建組件
二、引用組件
1、局部引用
2、全局引用
三、組件和頁面的區(qū)別
四、組件樣式隔離
1、注意點
2、修改組件的樣式隔離選項
?五、數(shù)據(jù)、方法、屬性
1、data數(shù)據(jù)
2、methods方法
3、properties屬性
?4、data和properties的區(qū)別
?5、使用setData修改properties的值
?六、數(shù)據(jù)監(jiān)聽器
1、語法格式
?2、基本用法
3、監(jiān)聽對象屬性的變化
4、監(jiān)聽對象中所有屬性的變化
?七、純數(shù)據(jù)字段
1、使用規(guī)則
?2、使用純數(shù)據(jù)字段改造數(shù)據(jù)監(jiān)聽器
?八、組件的生命周期
1、created,attached,detached
?2、lifetimes節(jié)點
?九、組件所在頁面的生命周期
?1、pageLifetimes節(jié)點
十、插槽
1、單個插槽
?2、啟用和定義多個插槽
?十一、父子組件通信
?1、屬性綁定（父--->子）
?2、事件綁定（子--->父）
?3、獲取組件實例
?十二、behaviors
1、創(chuàng)建behavior
?2、導(dǎo)入并使用behavior
?3、behavior中所有可用的節(jié)點
?4、同名字段的覆蓋和組合規(guī)則
一、創(chuàng)建組件
- 在項目的根目錄中，鼠標(biāo)右鍵，創(chuàng)建components -> test 文件夾
- 在新建的components -> test文件夾上，鼠標(biāo)右鍵，點擊“新建Component"
- 鍵入組件的名稱之后回車，會自動生成組件對應(yīng)的4個文件，后綴名分別為.js，.json，.wxml和.wxss
?
二、引用組件
1、局部引用
在頁面的.json配置文件中引用組件的方式，叫做“局部引用”。示例代碼如下：
{
"component": true,
"usingComponents": {
"my-test":"/components/test/test"
}
}可在.wxml中使用組件：<my-test></my-test>?
2、全局引用
在app.json 全局配置文件中引用組件的方式，叫做“全局引用”。使用與上面代碼相同，全局不用寫"component":true
data:{
n1:0, n2:0, sum:0
},
methods:{
addN1(){
this.setData({
n1:this.data.n1+1
})
},
addN2(){
this.setData({
n2:this.data.n2+1
})
}
},
observers:{
'n1,n2':function(nn1,nn2){
this.setData({
sum:nn1+nn2
})
}
}三、組件和頁面的區(qū)別
從表面來看，組件和頁面都是由.js、.json、.wxml和.wxss 這四個文件組成的。但是，組件和頁面的.js 與.json文件有明顯的不同：
- 組件的.json文件中需要聲明"component" : true屬性
- 組件的.js文件中調(diào)用的是Component()函數(shù)
- 組件的事件處理函數(shù)需要定義到 methods節(jié)點中
?
四、組件樣式隔離
默認情況下，自定義組件的樣式只對當(dāng)前組件生效，不會影響到組件之外的UI結(jié)構(gòu)。
1、注意點
- app.wxss中的全局樣式對組件無效
- 只有class選擇器會有樣式隔離效果，id選擇器、屬性選擇器、標(biāo)簽選擇器不受樣式隔離的影響
建議：在組件和引用組件的頁面中建議使用class選擇器，不要使用id、屬性、標(biāo)簽選擇器！
2、修改組件的樣式隔離選項
默認情況下，自定義組件的樣式隔離特性能夠防止組件內(nèi)外樣式互相干擾的問題。但有時，我們希望在外界能夠控制組件內(nèi)部的樣式，此時，可以通過stylelsolation修改組件的樣式隔離選項，用法如下：
方式一：在組件的.js文件中新增如下配置
Component({
options:{
styleIsolation:'isolated'
}
}方式二：在組件的.json文件中新增如下配置
"styleIsolation":"isolated" ?styleIsolation的可選值
?五、數(shù)據(jù)、方法、屬性
類似vue
1、data數(shù)據(jù)
在小程序組件中，用于組件模板渲染的私有數(shù)據(jù)，需要定義到data節(jié)點中。
2、methods方法
在小程序組件中，用于組件模板渲染的私有數(shù)據(jù)，需要定義到data節(jié)點中。
?自定義方法建議以_開頭：為了區(qū)分事件處理函數(shù)和自定義方法。
3、properties屬性
在小程序組件中，properties是組件的對外屬性，用來接收外界傳遞到組件中的數(shù)據(jù)。
?4、data和properties的區(qū)別
在vue中，data可讀可寫，而properties只讀
在小程序的組件中，properties屬性和data數(shù)據(jù)的用法相同，它們都是可讀可寫的，只不過：
- data更傾向于存儲組件的私有數(shù)據(jù)
- properties更傾向于存儲外界傳遞到組件中的數(shù)據(jù)
?
?
?5、使用setData修改properties的值
由于data數(shù)據(jù)和 properties屬性在本質(zhì)上沒有任何區(qū)別，因此 properties屬性的值也可以用于頁面渲染，或使用setData為properties 中的屬性重新賦值，示例代碼如下：
?六、數(shù)據(jù)監(jiān)聽器
1、語法格式
數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器。在小程序組件中，數(shù)據(jù)監(jiān)聽器的基本語法格式如下：
?2、基本用法
<view>{{n1}}+{{n2}}={{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</button> data:{
n1:0, n2:0, sum:0
},
methods:{
addN1(){
this.setData({
n1:this.data.n1+1
})
},
addN2(){
this.setData({
n2:this.data.n2+1
})
}
},
observers:{
'n1,n2':function(nn1,nn2){
this.setData({
sum:nn1+nn2
})
}
}3、監(jiān)聽對象屬性的變化
數(shù)據(jù)監(jiān)聽器支持監(jiān)聽對象中單個或多個屬性的變化，示例語法如下：
4、監(jiān)聽對象中所有屬性的變化
如果某個對象中需要被監(jiān)聽的屬性太多，為了方便，可以使用通配符**來監(jiān)聽對象中所有屬性的變化，示例代碼如下：
?七、純數(shù)據(jù)字段
概念：純數(shù)據(jù)字段指的是那些不用于界面渲染的data字段。
應(yīng)用場景：例如有些情況下，某些data 中的字段既不會展示在界面上，也不會傳遞給其他組件，僅僅在當(dāng)前組件內(nèi)部使用。帶有這種特性的data字段適合被設(shè)置為純數(shù)據(jù)字段。
好處：純數(shù)據(jù)字段有助于提升頁面更新的性能。
1、使用規(guī)則
在Component構(gòu)造器的options 節(jié)點中，指定pureDataPattern為一個正則表達式，字段名符合這個正則表達式的字段將成為純數(shù)據(jù)字段，示例代碼如下：
?2、使用純數(shù)據(jù)字段改造數(shù)據(jù)監(jiān)聽器
?八、組件的生命周期
1、created,attached,detached
在小程序組件中，最重要的生命周期函數(shù)有3個，分別是created、attached
detached。它們各自的特點如下：
組件實例剛被創(chuàng)建好的時候，created生命周期函數(shù)會被觸發(fā)
- 此時還不能調(diào)用setData
- 通常在這個生命周期函數(shù)中，只應(yīng)該用于給組件的this添加一些自定義的屬性字段
在組件完全初始化完畢、進入頁面節(jié)點樹后,attached生命周期函數(shù)會被觸發(fā)
- 此時， this.data已被初始化完畢
- 這個生命周期很有用，絕大多數(shù)初始化的工作可以在這個時機進行（例如發(fā)請求獲取初始數(shù)據(jù))
在組件離開頁面節(jié)點樹后， detached生命周期函數(shù)會被觸發(fā)
- 退出一個頁面時，會觸發(fā)頁面內(nèi)每個自定義組件的detached生命周期函數(shù)
- 此時適合做一些清理性質(zhì)的工作
?
?2、lifetimes節(jié)點
在小程序組件中，生命周期函數(shù)可以直接定義在Component構(gòu)造器的第一級參數(shù)中，可以在lifetimes字段內(nèi)進行聲明（這是推薦的方式，其優(yōu)先級最高）。示例代碼如下：
?九、組件所在頁面的生命周期
有時，自定義組件的行為依賴于頁面狀態(tài)的變化，此時就需要用到組件所在頁面的生命周期。
例如：每當(dāng)觸發(fā)頁面的show生命周期函數(shù)的時候，我們希望能夠重新生成一個隨機的RGB顏色值。在自定義組件中，組件所在頁面的生命周期函數(shù)有如下3個，分別是：
?1、pageLifetimes節(jié)點
組件所在頁面的生命周期函數(shù)，需要定義在pageLifetimes 節(jié)點中，示例代碼如下：
?:function可省略
十、插槽
在自定義組件的wxml結(jié)構(gòu)中，可以提供一個<slot>節(jié)點（插槽），用于承載組件使用者提供的wxml結(jié)構(gòu)。
1、單個插槽
在小程序中，默認每個自定義組件中只允許使用一個<slot>進行占位，這種個數(shù)上的限制叫做單個插槽。
<!-- 組件封裝者 -->
<!-- 對于不確定的內(nèi)容，可以使用<slot>進行占位，具體的內(nèi)容由組件的使用者決定 -->
<slot></slot><!-- 組件使用者 -->
<my-test4>
<view>這是通過插槽填充的內(nèi)容</view>
</my-test4>
?2、啟用和定義多個插槽
啟用
在小程序的自定義組件中，需要使用多<slot>插槽時，可以在組件的.js 文件中，通過如下方式進行啟用。示例代碼如下：
Component({
/**
* 組件的屬性列表
*/
options:{
multipleSlots:true
}
})
定義
可以在組件的.wxml 中使用多個<slot>標(biāo)簽，以不同的name來區(qū)分不同的插槽。示例代碼如下：
<!-- 組件封裝者 -->
<!-- 對于不確定的內(nèi)容，可以使用<slot>進行占位，具體的內(nèi)容由組件的使用者決定 -->
<slot name="one"></slot>
<slot name="two"></slot><!-- 組件使用者 -->
<my-test4>
<view slot="one">這是通過插槽填充的內(nèi)容one</view>
<view slot="two">這是通過插槽填充的內(nèi)容two</view>
</my-test4>
?十一、父子組件通信
屬性綁定
- 用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置JSON兼容的數(shù)據(jù)
事件綁定
- 用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)
獲取組件實例
- 父組件還可以通過this.selectComponent()獲取子組件實例對象
- 這樣就可以直接訪問子組件的任意數(shù)據(jù)和方法
?
?1、屬性綁定（父--->子）
屬性綁定用于實現(xiàn)父向子傳值，而且只能傳遞普通類型的數(shù)據(jù)，無法將方法傳遞給子組件。父組件的示例代碼如下：
data: {
count:0
},<my-test5 count="{{count}}"></my-test5>子組件在properties節(jié)點中聲明對應(yīng)的屬性并使用。示例代碼如下：
/**
* 組件的屬性列表
*/
properties: {
count:Number
},<view>子組件中，count值為：{{count}}</view>?2、事件綁定（子--->父）
事件綁定用于實現(xiàn)子向父傳值，可以傳遞任何類型的數(shù)據(jù)。使用步驟如下：
- 在父組件的js中，定義一個函數(shù)，這個函數(shù)即將通過自定義事件的形式，傳遞給子組件
- 在父組件的wxml中，通過自定義事件的形式，將步驟1中定義的函數(shù)引用，傳遞給子組件
- 在子組件的js中，通過調(diào)用this.triggerEvent('自定義事件名稱', {/*參數(shù)對象*/})，將數(shù)據(jù)發(fā)送到父組件
- 在父組件的js中，通過e.detail 獲取到子組件傳遞過來的數(shù)據(jù)
?
?步驟1：在父組件的js 中，定義一個函數(shù)，這個函數(shù)即將通過自定義事件的形式，傳遞給子組件。
// 在父組件中定義方法，
// 將來這個方法會被傳遞給子組件，供子組件調(diào)用
syncCount(){
console.log('syncCount')
},步驟2：在父組件的wxml 中，通過自定義事件的形式，將步驟1中定義的函數(shù)引用，傳遞給子組件。
<!-- 使用bind自定義事件名稱，結(jié)構(gòu)清晰（推薦） -->
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
<!-- 或在bind后面直接寫上自定義事件名稱 -->
<my-test5 count="{{count}}" bindsync="syncCount"></my-test5>?步驟3：在子組件的js 中，通過調(diào)用this.triggerEvent(自定義事件名稱'，{/*參數(shù)對象*/})，將數(shù)據(jù)發(fā)送到父組件。
methods: {
addOne(){
this.setData({
count:this.properties.count+1
}),
this.triggerEvent('sync',{value:this.properties.count})
},
}?步驟4：在父組件的js 中，通過e.detail 獲取到子組件傳遞過來的數(shù)據(jù)。
syncCount(e){
// console.log('syncCount')
this.setData({
count:e.detail.value
})
},?3、獲取組件實例
可在父組件里調(diào)用this.selectComponent("id或class選擇器")，獲取子組件的實例對象，從而直接訪問子組件的任意數(shù)據(jù)和方法。調(diào)用時需要傳入一個選擇器，例如 this.selectComponent(".my-component")。
?十二、behaviors
behaviors是小程序中，用于實現(xiàn)組件間代碼共享的特性，類似于Vue.js 中的“mixins”。
每個behavior可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中。
每個組件可以引用多個behavior，behavior也可以引用其它behavior。
1、創(chuàng)建behavior
調(diào)用Behavior(Object object)方法即可創(chuàng)建一個共享的behavior實例對象，供所有的組件使用：
?2、導(dǎo)入并使用behavior
在組件中，使用require()方法導(dǎo)入需要的behavior，掛載后即可訪問behavior中的數(shù)據(jù)或方法，示例代碼如下：
?3、behavior中所有可用的節(jié)點
?4、同名字段的覆蓋和組合規(guī)則
組件和它引用的behavior中可以包含同名的字段，此時可以參考如下3種同名時的處理規(guī)則：
- 同名的數(shù)據(jù)字段(data)
- 同名的屬性(properties)或方法(methods)
- 同名的生命周期函數(shù)
?
?微信小程序官方文檔說明：
behaviors | 微信開放文檔 (qq.com)
---------------------------------------------------------------------------------------------------------------------------------
自定義組件結(jié)束，可對照檢驗學(xué)習(xí)成果----------------------------->
?
?--------------------------------------------------------------------------------------------------------------------------------文章來源：http://www.zghlxwxcb.cn/news/detail-821204.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-821204.html
到了這里，關(guān)于微信小程序（四）--- 自定義組件詳解（properties，數(shù)據(jù)監(jiān)聽器，純數(shù)據(jù)字段，插槽，父子間通信，behaviors）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
