什么是微信小程序的自定義組件以及意義
自定義組件，類似于Vue中的組件概念（事件通信機(jī)制非常類似）确丢，將頁面內(nèi)的一些功能模塊抽象成自定義組件隙笆，以便在不同的頁面中重復(fù)使用诡右，也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，有助于代碼的維護(hù)驾荣。
創(chuàng)建自定義組件
自定義組件和頁面類似觉阅，也是需要四個(gè)部分組成。wxss秘车，wxml典勇，js，json
在自定義組件的js文件中叮趴，需要使用Component()來注冊組件割笙，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法眯亦。
屬性和內(nèi)部數(shù)據(jù)都是被用于wxml的渲染伤溉，其中屬性值是可由外部組件傳入的。
如何使用自定義組件
怎樣在一個(gè)具體的頁面中使用自定義組件呢妻率？首先乱顾，我們需要告訴頁面我們引用了哪一個(gè)自定義組件，也就需要在頁面的json中進(jìn)行引用聲明宫静。如下所示走净，提供每個(gè)自定義組件的標(biāo)簽名以及對應(yīng)的自定義組件的文件路徑。
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
然后孤里，我們在頁面的wxml中就可以像使用基礎(chǔ)組件一樣使用自定義組件伏伯。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值捌袜。如下所示：
<view>
<!-- 以下是對一個(gè)自定義組件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
注意事項(xiàng)
在組件wxss中不應(yīng)該使用ID選擇器说搅、屬性選擇器和標(biāo)簽選擇器
因?yàn)閣xml節(jié)點(diǎn)標(biāo)簽名只能是小寫字母，中劃線和下劃線組成虏等，所以自定義組件也只能包含這些這些字符弄唧。
在properties定義段中适肠，屬性名采用駝峰寫法（propertyName）；在wxml中候引，指定屬性值的時(shí)候則對應(yīng)使用連字符寫法（component-tag-name property-name="attr name"）迂猴，應(yīng)用于數(shù)據(jù)綁定的時(shí)候采用駝峰寫法（attr="propertyName"）
使用this.data可以獲取內(nèi)部數(shù)據(jù)和屬性值，但不要直接修改它們背伴，應(yīng)該使用setData修改
組件模板
組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹沸毁，將被插入到組件的引用位置上。
在組件模板中可以提供一個(gè)<slot>節(jié)點(diǎn)傻寂，用于承載組件引用時(shí)提供的子節(jié)點(diǎn)息尺。
如下所示：
<!-- 組件模板 -->
<view class="wrapper">
<view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
<slot></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
<component-tag-name>
<!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
<view>這里是插入到組件slot中的內(nèi)容</view>
</component-tag-name>
</view>
當(dāng)然，也可以使用多個(gè)slot疾掰，如果使用多個(gè)slot的時(shí)候搂誉，組件需要指定slot的name屬性，然后在使用組件的時(shí)候静檬，使用slot屬性將節(jié)點(diǎn)插入到不同的slot中上炭懊。
官方的例子如下：
<!-- 組件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>這里是組件的內(nèi)部細(xì)節(jié)</view>
<slot name="after"></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
<component-tag-name>
<!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 -->
<view slot="before">這里是插入到組件slot name="before"中的內(nèi)容</view>
<!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
<view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
</component-tag-name>
</view>
組件樣式
組件對應(yīng)的wxss文件中的樣式，只對組件中wxml生效拂檩，編寫組件樣式的時(shí)候侮腹，需要特別注意：
- 繼承樣式。如font稻励、color父阻，會從組件外繼承到組件內(nèi)。
- 除了繼承樣式外望抽，app.wxss中的樣式加矛、組件所在頁面的樣式對自定義組組件無效。
- 子選擇器（.a>.b）只能用于view組件與其子節(jié)點(diǎn)之間煤篙，用于其他組件可能導(dǎo)致非預(yù)期的結(jié)果
Component構(gòu)造器
ComPonent構(gòu)造器可用于定義組件斟览，調(diào)用Component構(gòu)造器的時(shí)候可以指定組件的屬性、數(shù)據(jù)辑奈、方法等
組件間通信與事件
組件之間的基本通信方法有以下幾種：
- wxml數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)苛茂，僅能設(shè)置JSON兼容數(shù)據(jù)
- 事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任何數(shù)據(jù)
- 如果以上兩種方式還不足以滿足需求身害，那么父組件還可以通過this.selectComponent方法獲取子組件的實(shí)例對象味悄，這樣就可以直接訪問組件中的任意數(shù)據(jù)和方法了草戈。
下面就介紹通過事件進(jìn)行通信
自定義組件觸發(fā)事件
自定義組件觸發(fā)事件的時(shí)候塌鸯，需要通過triggerEvent方法，指定事件名稱唐片、detail對象和事件選項(xiàng)丙猬。官方例子如下：
<!-- 在自定義組件中 -->
<button bindtap="onTap">點(diǎn)擊這個(gè)按鈕將觸發(fā)“myevent”事件</button>
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = {} // detail對象涨颜，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
其中觸發(fā)事件的選項(xiàng)包括：
調(diào)用組件，監(jiān)聽事件
引用組件的頁面可以監(jiān)聽這些事件茧球。如下：
<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時(shí)庭瑰，調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function(e){
e.detail // 自定義組件觸發(fā)事件時(shí)提供的detail對象
}
})
