一、小程序自定義組件

一個自定義組件由 json wxml wxss js 4個文件組成

1.自定義組件聲明

{
  "component": true       //在json文件中進行自定義組件聲明
}

2.註冊組件

在自定義組件的 js 文件中，需要使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法

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

3.使用自定義組件

使用已註冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標籤名和對應的自定義組件文件路徑：

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

二、組件間通信與事件

1.父--->子

模板數據綁定

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

在以上例子中，組件的屬性 propA 和 propB 將收到頁面傳遞的數據。頁面可以通過 setData 來改變綁定的數據字段。

2.子--->父

子組件發佈觸發事件

自定義組件觸發事件時，需要使用 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對象
  }
})

三、代碼共享

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

四、組件之間的通信

1. 有時需要實現這樣的組件：

<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>

這個例子中， custom-ul 和 custom-li 都是自定義組件，它們有相互間的關係，相互間的通信往往比較複雜。此時在組件定義時加入 relations 定義段，可以解決這樣的問題。示例：

// path/to/custom-ul.js
Component({
  relations: {
    './custom-li': {
      type: 'child', // 關聯的目標節點應為子節點
      linked: function(target) {
        // 每次有custom-li被插入時執行，target是該節點實例對象，觸發在該節點attached生命週期之後
      },
      linkChanged: function(target) {
        // 每次有custom-li被移動後執行，target是該節點實例對象，觸發在該節點moved生命週期之後
      },
      unlinked: function(target) {
        // 每次有custom-li被移除時執行，target是該節點實例對象，觸發在該節點detached生命週期之後
      }
    }
  },
  methods: {
    _getAllLi: function(){
      // 使用getRelationNodes可以獲得nodes數組，包含所有已關聯的custom-li，且是有序的
      var nodes = this.getRelationNodes('path/to/custom-li')
    }
  },
  ready: function(){
    this._getAllLi()
  }
})

// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // 關聯的目標節點應為父節點
      linked: function(target) {
        // 每次被插入到custom-ul時執行，target是custom-ul節點實例對象，觸發在attached生命週期之後
      },
      linkChanged: function(target) {
        // 每次被移動後執行，target是custom-ul節點實例對象，觸發在moved生命週期之後
      },
      unlinked: function(target) {
        // 每次被移除時執行，target是custom-ul節點實例對象，觸發在detached生命週期之後
      }
    }
  }
})

注意：必須在兩個組件定義中都加入relations定義，否則不會生效。

2. 有時，需要關聯的是一類組件，如：

   <custom-form>
     <view>
       input
       <custom-input></custom-input>
     </view>
     <custom-submit> submit </custom-submit>
   </custom-form>

custom-form 組件想要關聯 custom-input 和 custom-submit 兩個組件。此時，如果這兩個組件都有同一個behavior：

// path/to/custom-form-controls.js
module.exports = Behavior({
  // ...
})
// path/to/custom-input.js
var customFormControls = require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // 關聯的目標節點應為祖先節點
    }
  }
})
// path/to/custom-submit.js
var customFormControls = require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // 關聯的目標節點應為祖先節點
    }
  }
})

則在 relations 關係定義中，可使用這個behavior來代替組件路徑作為關聯的目標節點：

// path/to/custom-form.js
var customFormControls = require('./custom-form-controls')
Component({
  relations: {
    'customFormControls': {
      type: 'descendant', // 關聯的目標節點應為子孫節點
      target: customFormControls
    }
  }
})