## 自定義組件開發 ### 創建自定義組件 類似于頁面，一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可這一組文件設為自定義組件）： ~~~ { "component": true } ~~~ 注冊頁面的寫法 ~~~ Component({ properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: { type: String, value: 'default value', } }, data: { // 這里是一些組件內部數據 someData: {} }, methods: { // 這里是一個自定義方法 customMethod() {} } }) ~~~ 使用自定義組件 ~~~ { "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } ~~~ ### 組件的主要生命周期 ~~~ Component({ lifetimes: { attached() { // 在組件實例進入頁面節點樹時執行 }, detached() { // 在組件實例被從頁面節點樹移除時執行 }, }, // 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎庫的兼容 attached() { // 在組件實例進入頁面節點樹時執行 }, detached() { // 在組件實例被從頁面節點樹移除時執行 }, // ... }) ~~~  組件所在頁面的生命周期  ~~~ Component({ pageLifetimes: { show() { // 頁面被展示 }, hide() { // 頁面被隱藏 }, resize(size) { // 頁面尺寸變化 } } }) ~~~ ### 組件間通信與事件 父組件=>子組件通信 prop-參數名 ~~~ <view> <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"> <!-- 這部分內容將被放置在組件 <slot> 的位置上 --> <view>這里是插入到組件slot中的內容</view> </component-tag-name> </view> ~~~ ~~~ Component({ properties: { myProperty: { // 屬性名 type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型） value: '', // 屬性初始值（可選），如果未指定則會根據類型選擇一個 observer(newVal, oldVal, changedPath) { // 屬性被改變時執行的函數（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange' // 通常 newVal 就是新設置的數據， oldVal 是舊數據 } }, myProperty2: String // 簡化的定義方式 }, ~~~ 組件上綁定事件 ~~~ <!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以寫成 --> <component-tag-name bind:myevent="onMyEvent" /> ~~~ 組件內部觸發外部綁定事件 ~~~ Component({ properties: {}, methods: { onTap() { const myEventDetail = {} // detail對象，提供給事件監聽函數 const myEventOption = {} // 觸發事件的選項 this.triggerEvent('myevent', myEventDetail, myEventOption) } } }) ~~~ ### behaviors behaviors 是用于組件間代碼共享的特性，類似于一些編程語言中的“mixins”或“traits”。 ~~~ // my-behavior.js module.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached() {}, methods: { myBehaviorMethod() {} } }) ~~~ ~~~ // my-component.js const myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached() {}, methods: { myMethod() {} } }) ~~~ ### 插槽 ~~~ <view class="wrapper"> <view>這里是組件的內部節點</view> <slot></slot> </view> ~~~ ~~~ <!-- 引用組件的頁面模板 --> <view> <component-tag-name> <!-- 這部分內容將被放置在組件 <slot> 的位置上 --> <view>這里是插入到組件slot中的內容</view> </component-tag-name> </view> ~~~ 默認情況下，一個組件的wxml中只能有一個slot。需要使用多slot時，可以在組件js中聲明啟用。 此時，可以在這個組件的wxml中使用多個slot，以不同的 name 來區分。 ~~~ <!-- 組件模板 --> <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> ~~~ ### 組件間關系 定義和使用組件間關系 ~~~ <custom-ul> <custom-li>item 1</custom-li> <custom-li>item 2</custom-li> </custom-ul> ~~~ ~~~ // path/to/custom-ul.js Component({ relations: { './custom-li': { type: 'child', // 關聯的目標節點應為子節點 linked(target) { // 每次有custom-li被插入時執行，target是該節點實例對象，觸發在該節點attached生命周期之后 }, linkChanged(target) { // 每次有custom-li被移動后執行，target是該節點實例對象，觸發在該節點moved生命周期之后 }, unlinked(target) { // 每次有custom-li被移除時執行，target是該節點實例對象，觸發在該節點detached生命周期之后 } } }, methods: { _getAllLi() { // 使用getRelationNodes可以獲得nodes數組，包含所有已關聯的custom-li，且是有序的 const nodes = this.getRelationNodes('path/to/custom-li') } }, ready() { this._getAllLi() } }) ~~~ ~~~ // path/to/custom-li.js Component({ relations: { './custom-ul': { type: 'parent', // 關聯的目標節點應為父節點 linked(target) { // 每次被插入到custom-ul時執行，target是custom-ul節點實例對象，觸發在attached生命周期之后 }, linkChanged(target) { // 每次被移動后執行，target是custom-ul節點實例對象，觸發在moved生命周期之后 }, unlinked(target) { // 每次被移除時執行，target是custom-ul節點實例對象，觸發在detached生命周期之后 } } } }) ~~~ 注意：必須在兩個組件定義中都加入relations定義，否則不會生效