什么是微信小程序的自定義組件以及意義

自定義組件，類似于Vue中的組件概念（事件通信機(jī)制非常類似），將頁面內(nèi)的一些功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用，也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，有助于代碼的維護(hù)。

創(chuàng)建自定義組件

自定義組件和頁面類似，也是需要四個(gè)部分組成。wxss，wxml，js，json

在自定義組件的js文件中，需要使用Component()來注冊(cè)組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。

屬性和內(nèi)部數(shù)據(jù)都是被用于wxml的渲染，其中屬性值是可由外部組件傳入的。

如何使用自定義組件

怎樣在一個(gè)具體的頁面中使用自定義組件呢？首先，我們需要告訴頁面我們引用了哪一個(gè)自定義組件，也就需要在頁面的json中進(jìn)行引用聲明。如下所示，提供每個(gè)自定義組件的標(biāo)簽名以及對(duì)應(yīng)的自定義組件的文件路徑。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

然后，我們?cè)陧撁娴膚xml中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。如下所示：

<view>
  <!-- 以下是對(duì)一個(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í)候則對(duì)應(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>

組件樣式

組件對(duì)應(yīng)的wxss文件中的樣式，只對(duì)組件中wxml生效，編寫組件樣式的時(shí)候，需要特別注意：

• 繼承樣式。如font、color，會(huì)從組件外繼承到組件內(nèi)。
• 除了繼承樣式外，app.wxss中的樣式、組件所在頁面的樣式對(duì)自定義組組件無效。
• 子選擇器（.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í)例對(duì)象，這樣就可以直接訪問組件中的任意數(shù)據(jù)和方法了。

下面就介紹通過事件進(jìn)行通信
自定義組件觸發(fā)事件
自定義組件觸發(fā)事件的時(shí)候，需要通過triggerEvent方法，指定事件名稱、detail對(duì)象和事件選項(xiàng)。官方例子如下：

<!-- 在自定義組件中 -->
<button bindtap="onTap">點(diǎn)擊這個(gè)按鈕將觸發(fā)“myevent”事件</button>

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail對(duì)象，提供給事件監(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對(duì)象
  }
})