什么是微信小程序的自定義組件以及意義
自定義組件，類似于Vue中的組件概念（事件通信機制非常類似），將頁面內的一些功能模塊抽象成自定義組件，以便在不同的頁面中重復使用，也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼的維護。
創建自定義組件
自定義組件和頁面類似，也是需要四個部分組成。wxss，wxml，js，json
在自定義組件的js文件中，需要使用Component()來注冊組件，并提供組件的屬性定義、內部數據和自定義方法。
屬性和內部數據都是被用于wxml的渲染，其中屬性值是可由外部組件傳入的。
如何使用自定義組件
怎樣在一個具體的頁面中使用自定義組件呢？首先，我們需要告訴頁面我們引用了哪一個自定義組件，也就需要在頁面的json中進行引用聲明。如下所示，提供每個自定義組件的標簽名以及對應的自定義組件的文件路徑。
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
然后，我們在頁面的wxml中就可以像使用基礎組件一樣使用自定義組件。節點名即自定義組件的標簽名，節點屬性即傳遞給組件的屬性值。如下所示：
<view>
<!-- 以下是對一個自定義組件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
注意事項
在組件wxss中不應該使用ID選擇器、屬性選擇器和標簽選擇器
因為wxml節點標簽名只能是小寫字母，中劃線和下劃線組成，所以自定義組件也只能包含這些這些字符。
在properties定義段中，屬性名采用駝峰寫法（propertyName）；在wxml中，指定屬性值的時候則對應使用連字符寫法（component-tag-name property-name="attr name"），應用于數據綁定的時候采用駝峰寫法（attr="propertyName"）
使用this.data可以獲取內部數據和屬性值，但不要直接修改它們，應該使用setData修改
組件模板
組件模板與組件數據結合后生成的節點樹，將被插入到組件的引用位置上。
在組件模板中可以提供一個<slot>節點，用于承載組件引用時提供的子節點。
如下所示：
<!-- 組件模板 -->
<view class="wrapper">
<view>這里是組件的內部節點</view>
<slot></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
<component-tag-name>
<!-- 這部分內容將被放置在組件 <slot> 的位置上 -->
<view>這里是插入到組件slot中的內容</view>
</component-tag-name>
</view>
當然，也可以使用多個slot，如果使用多個slot的時候，組件需要指定slot的name屬性，然后在使用組件的時候，使用slot屬性將節點插入到不同的slot中上。
官方的例子如下：
<!-- 組件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>這里是組件的內部細節</view>
<slot name="after"></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
<component-tag-name>
<!-- 這部分內容將被放置在組件 <slot name="before"> 的位置上 -->
<view slot="before">這里是插入到組件slot name="before"中的內容</view>
<!-- 這部分內容將被放置在組件 <slot name="after"> 的位置上 -->
<view slot="after">這里是插入到組件slot name="after"中的內容</view>
</component-tag-name>
</view>
組件樣式
組件對應的wxss文件中的樣式，只對組件中wxml生效，編寫組件樣式的時候，需要特別注意：
- 繼承樣式。如font、color，會從組件外繼承到組件內。
- 除了繼承樣式外，app.wxss中的樣式、組件所在頁面的樣式對自定義組組件無效。
- 子選擇器（.a>.b）只能用于view組件與其子節點之間，用于其他組件可能導致非預期的結果
Component構造器
ComPonent構造器可用于定義組件，調用Component構造器的時候可以指定組件的屬性、數據、方法等
組件間通信與事件
組件之間的基本通信方法有以下幾種：
- wxml數據綁定：用于父組件向子組件的指定屬性設置數據，僅能設置JSON兼容數據
- 事件：用于子組件向父組件傳遞數據，可以傳遞任何數據
- 如果以上兩種方式還不足以滿足需求，那么父組件還可以通過this.selectComponent方法獲取子組件的實例對象，這樣就可以直接訪問組件中的任意數據和方法了。
下面就介紹通過事件進行通信
自定義組件觸發事件
自定義組件觸發事件的時候，需要通過triggerEvent方法，指定事件名稱、detail對象和事件選項。官方例子如下：
<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發“myevent”事件</button>
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = {} // detail對象，提供給事件監聽函數
var myEventOption = {} // 觸發事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
其中觸發事件的選項包括：
調用組件，監聽事件
引用組件的頁面可以監聽這些事件。如下：
<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function(e){
e.detail // 自定義組件觸發事件時提供的detail對象
}
})
