沒有看過微信小程式自定義元件(以下稱Component)的同學可以到官網上了解一下。

以下是對Component的總結：

一、Component概念

Component像頁面一樣由wxml、wxss、js和json4個檔案組成，且需要把這4個檔案放在同一個目錄中。與頁面不一樣的是，Component中的建構函式（也可以稱構造器）是Component({})，而頁面中的建構函式是Page({})。

二、slot

Component的slot（slot意思是插槽），主要是讓你在外部的wxml可以自由的在你的Component的wxml裡插入模組。大家可以在https://github.com/zhu12345618/slotDemo

還有一個例項是是Component接受外部樣式的，官網中有例子。

三、Component構造器

在Component構造器中需要注意的幾個屬性是：properties、data、methods。

其他的：如果是屬性的話，感覺用到的不多，所以就不說了；如果是函式，則都是Component的生命週期函式，官網上即可瞭解得很清楚。

1. properties：對外屬性，即如果外部的wxml檔案傳入資料時，會把資料設定成properties的屬性。

如官網例子的index.wxml：

<!-- 頁面的 WXML -->
<my-component my-property="example" />
 

這個"my-property"即對應custom-component.js裡properties屬性的myProperty，修改my-property就是修改myProperty。

custom-component.js如下：

Component({

  behaviors: [],

  properties: {
    myProperty: { // 屬性名
      type: String, // 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
      value: '', // 屬性初始值（可選），如果未指定則會根據型別選擇一個
      observer: function (newVal, oldVal) { } // 屬性被改變時執行的函式（可選），也可以寫成在methods段中定義的方法名字串, 如：'_propertyChange'
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有資料，可用於模版渲染

  // 生命週期函式，可以為函式，或一個在methods段中定義的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新屬性和資料的方法與更新頁面資料的方法類似
        myProperty: 'Test'
      })
    },
    _myPrivateMethod: function () {
      // 內部方法建議以下劃線開頭
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這裡將 data.A[0].B 設為 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {

    }
  }

})
 

但是！小程式有一個問題：是如果properties中的屬性是帶有數字的，如：myProperty2，這樣wxml裡對應的就是my-property2，但是這樣程式會報錯，希望小程式以後可能修復這個問題。

2. data：這裡的data和頁面中的data是一致的，但是這裡的data只在元件內部使用。

Tips：properties和data裡的屬性不能一樣，否則會有衝突。

3. methods：元件中的方法都是在這個物件裡定義。

四、元件與外部通訊事件

上面的"myProperty"是父節點設定資料到元件裡，元件傳資料到父節點是用事件的方式。

註冊事件，index.wxml和index.js：

<!-- 引用元件的頁面模版 -->
<view>
  <my-component id="test" bindmyevent="myEventListener">
     <view>這裡是插入到元件slot中的內容</view> 
  </my-component>

  <!-- 或者可以寫成 -->
  <!--
    <my-component id="test" bindmyevent="myEventListener">
     <view>這裡是插入到元件slot中的內容</view> 
    </my-component>
   -->
</view>

監聽事件：

Page({
  data: {

  },
  onLoad : function() {
      console.log(this.selectComponent("#test"));
  },
  myEventListener: function(e) {
    console.log("Event in index")
  }
})

發射事件component-tag-name.wxml和component-tag-name.js：

<!-- 元件模板 -->
<view class="wrapper">
  <button bindtap="onTap">點選這個按鈕將觸發“myevent”事件</button>
</view>

// components/component-tag-name.js
Component({
  properties: {},
  methods: {
    onTap: function () {
      var myEventDetail = {} // detail物件，提供給事件監聽函式
      var myEventOption = {} // 觸發事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

五、元件通訊的最後大招

如果以上通訊還不能滿足需求，可以用this.selectComponent("#test")，這個方法需要傳一個id號。

注意上面的index.wxml中有一個程式碼是id="test"，這樣定義之後，就可以在js檔案中用this.selectComponent("#test")獲取到這個元件了。

最後，Component還有behaviors、元件關係、抽象節點等特性，但是對於一般的需求來說，不經常用到，所以就不作總結了。如果需要了解的話，可以去官網學習。

以上是本人的一點小總結，如有不足之處，還請各位指正！