建立自定義元件

1. 類似於頁面，一個自定義元件由 json wxml wxss js 4個檔案組成。
2. 在 json 檔案中進行自定義元件宣告（將 component 欄位設為 true）。
3. 在 wxss 中不應使用 ID 選擇器、屬性選擇器和標籤名選擇器。
4. 在 js 檔案中，需要使用 Component() 來註冊元件，並提供元件的屬性定義、內部資料和自定義方法。元件的屬性值和內部資料將被用於元件 wxml 的渲染，其中，屬性值是可由元件外部傳入的，需要宣告型別和初始值。
5. 元件的屬性可以用於接收頁面的引數，如訪問頁面/pages/index/index?paramA=123&paramB=xyz
   ，如果宣告有屬性 paramA 或 paramB ，則它們會被賦值為 123 或 xyz 。

Component({
  properties: {
    // 這裡定義了innerText屬性，屬性值可以在元件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這裡是一些元件內部資料
    someData: {}
  },
  methods: {
    // 這裡是一個自定義方法
    customMethod: function(){}
  }
})

 

使用自定義元件

1. 需要在引用頁面的 json 檔案中進行引用宣告，此時需要提供每個自定義元件的標籤名和對應的自定義元件檔案路徑。
2. 因為 WXML 節點標籤名只能是小寫字母、中劃線和下劃線的組合，所以自定義元件的標籤名也只能包含這些字元。
3. 自定義元件和頁面所在專案根目錄名不能以“wx-”為字首，否則會報錯。

// 引用頁面json
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

// 引用頁面wxml
<view>
  <!-- 以下是對一個自定義元件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>
 

元件模板

1. 可以使用資料繫結，向子元件的屬性傳遞動態資料。

<!-- 引用元件的頁面模板 -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- 這部分內容將被放置在元件 <slot> 的位置上 -->
    <view>這裡是插入到元件slot中的內容</view>
  </component-tag-name>
</view>

2. 在元件模板中可以提供一個 節點，用於承載元件引用時提供的子節點。

<!-- 元件模板 -->
<view class="wrapper">
  <view>這裡是元件的內部節點</view>
  <slot></slot>
</view>

<!-- 引用元件的頁面模板 -->
<view>
  <component-tag-name>
    <!-- 這部分內容將被放置在元件 <slot> 的位置上 -->
    <view>這裡是插入到元件slot中的內容</view>
  </component-tag-name>
</view>

3. 需要使用多 slot 時，可以在元件 js 中宣告啟用。在元件的 wxml 中使用多個 slot ，以不同的 name 來區分。

// 元件 JS
Component({
  options: {
    multipleSlots: true // 在元件定義時的選項中啟用多slot支援
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

<!-- 元件模板 -->
<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>

元件間通訊

1. WXML 資料繫結：用於父元件向子元件的指定屬性設定資料，僅能設定 JSON 相容資料。
2. 事件：用於子元件向父元件傳遞資料，可以傳遞任意資料。

• 什麼是事件？
  （1）事件是檢視層到邏輯層的通訊方式。
  （2）事件可以將使用者的行為反饋到邏輯層進行處理。
  （3）事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。
  （4）事件物件可以攜帶額外資訊，如 id, dataset, touches。

• 監聽事件：自定義元件可以觸發任意的事件，引用元件的頁面可以監聽這些事件。

  監聽事件

  <!-- 當自定義元件觸發“myevent”事件時，呼叫“onMyEvent”方法 -->
  <component-tag-name bindmyevent="onMyEvent" />
  <!-- 或者可以寫成 -->
  <component-tag-name bind:myevent="onMyEvent" />
  
  Page({
    onMyEvent: function(e){
      e.detail // 自定義元件觸發事件時提供的detail物件
    }
  })
  
  

• 觸發事件：自定義元件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail物件和事件選項。

  觸發事件

  <!-- 在自定義元件中 -->
  <button bindtap="onTap">點選這個按鈕將觸發“myevent”事件</button>
  
  Component({
    properties: {},
    methods: {
      onTap: function(){
        var myEventDetail = {} // detail物件，提供給事件監聽函式
        var myEventOption = {} // 觸發事件的選項：bubbles，composed，capturePhase
        this.triggerEvent('myevent', myEventDetail, myEventOption)
      }
    }
  })
  

3. 父元件還可以通過 this.selectComponent 方法獲取子元件例項物件，這樣就可以直接訪問元件的任意資料和方法。

• 呼叫時需要傳入一個匹配選擇器 selector，如：this.selectComponent(".my-component")。

  使用 selectComponent

  // 父元件
  Page({
    data: {},
    getChildComponent: function () {
      const child = this.selectComponent('.my-component');
      console.log(child)
    }
  })