從小程序基礎(chǔ)庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。查看自己使用的小程序基礎(chǔ)庫版本，可以通過在開發(fā)者工具右側(cè)點擊詳情查看：

最基本的組件

小程序的組件，其實就是一個目錄，該目錄需要包含4個文件：

1. xxx.json
2. xxx.wxml
3. xxx.wxss
4. xxx.js

聲明一個組件

首先需要在 json 文件中進行自定義組件聲明（將 component 字段設(shè)為 true 可這一組文件設(shè)為自定義組件）

{
"component": true
}

其次，在要引入組件的頁面的json文件內(nèi)，進行引用聲明

{
"usingComponents": {
//自定義的組件名稱     ： 組件路徑，注意是相對路徑，不能是絕對路徑  
"component-tag-name": "path/to/the/custom/component"
}
}

這樣，在主頁面就可以使用了。

相比于vue的組件引入，小程序的方案更簡潔。vue組件引入是需要 import 之后，同時在 components 里面注冊，而小程序的組件只需要在 .json 里面注冊，就可以在 wxml 里面使用。

使用slot

和vue 相同，小程序也有slot概念。

單一slot

在組件模板中可以提供一個 <slot> 節(jié)點，用于承載組件引用時提供的子節(jié)點。

// 主頁面內(nèi)，<addlike>是組件
<addlike item="item" my_properties="sssss">
<text>我是被slot插入的文本</text>
</addlike>

// addlike 組件
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<slot></slot>
</view>

// 渲染后
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<text>我是被slot插入的文本</text>
</view>

多個slot

如果需要在組件內(nèi)使用多個slot， 需要在組件js中聲明啟用：

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

使用：

// 主頁面
<addlike item="item" my_properties="sssss">
// 在普通的元素上加入 slot 屬性，指定slotname, 就可以變成子元素的slot了
<text slot="slot1">我是被slot1插入的文本</text>
<text slot="slot2">我是被slot2插入的文本</text>
</addlike>

// 子頁面
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</view>

Component構(gòu)造器

剛才我們說了，一個組件內(nèi)應(yīng)該包括js, wxml, wxss, json 四個文件。wxml 相當(dāng)于是 HTML，wxss 相當(dāng)于是 css, 那么js 里面應(yīng)該寫什么呢？

微信官方提供的案例中：

Component({

 behaviors: [],

 properties: {

},
 data: {}, // 私有數(shù)據(jù)，可用于模版渲染

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

 methods: {
   onMyButtonTap: function(){

},
   _myPrivateMethod: function(){

},
   _propertyChange: function(newVal, oldVal) {

}
}
})

里面調(diào)用了一個Component構(gòu)造器。Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。具體 Component里面可以放什么東西，如下所示：

image

</figure>

組件與數(shù)據(jù)通信

組件化必然要涉及到數(shù)據(jù)的通信，為了解決數(shù)據(jù)在組件間的維護問題，vue, react，angular 有不同的解決方案。而小程序的解決方案則簡潔很多。

主頁面?zhèn)魅霐?shù)據(jù)到組件

properties相當(dāng)于vue的props，是傳入外部數(shù)據(jù)的入口。

// 主頁面使用組件
<a add_like="{{add_like}}">
</a>

// 組件a.js 內(nèi)
Component({
   properties:{
       add_like:{
           type:Array,
           value:[],
           observer:function(){
}
}
}
})

注意： 傳入的數(shù)據(jù)，不管是簡單數(shù)據(jù)類型，還是引用類型，都如同值復(fù)制一樣（和紅寶書里面描述js函數(shù)參數(shù)傳入是值復(fù)制還不一樣，紅寶書里面的意思是：簡單數(shù)據(jù)類型直接復(fù)制數(shù)值，引用類型復(fù)制引用，也就是說在函數(shù)內(nèi)修改參數(shù)對象的屬性，會影響到函數(shù)外對象的屬性）。

如果是Vue的props， 則可以通過 .sync 來同步，而在小程序子組件里面，調(diào)用this.setData()修改父組件內(nèi)的數(shù)據(jù)，不會影響到父組件里面的數(shù)據(jù), 也就是說，子組件property的修改，仿佛和父組件沒有任何關(guān)系。那么，如果是在子組件內(nèi)修改父組件的數(shù)據(jù)，甚至是修改兄弟組件內(nèi)的數(shù)據(jù)，有沒有簡單的方法呢？下面會有講到

組件傳出數(shù)據(jù)到主頁面

和vue類似，組件間交互的主要形式是自定義事件。

組件通過 this.triggerEvent() 觸發(fā)自定義事件，主頁面在組件上 bind:component_method="main_page_mehod" 來接收自定義事件。

其中，this.triggerEvent() 方法接收自定義事件名稱外，還接收兩個對象，eventDetail 和 eventOptions。

// 子組件觸發(fā)自定義事件
ontap () {
// 所有要帶到主頁面的數(shù)據(jù)，都裝在eventDetail里面
var eventDetail = {
        name:'sssssssss',
        test:[1,2,3]
}
// 觸發(fā)事件的選項 bubbles是否冒泡，composed是否可穿越組件邊界，capturePhase 是否有捕獲階段
var eventOption = {
        composed: true
}
this.triggerEvent('click_btn', eventDetail, eventOption)
}

// 主頁面里面
main_page_ontap (eventDetail) {
   console.log(eventDetail)
// eventDetail
// changedTouches
// currentTarget
// target
// type
// ……
// detail   哈哈，所有的子組件的數(shù)據(jù)，都通過該參數(shù)的detail屬性暴露出來
}

組件之間數(shù)據(jù)通信

和vue提出的vuex的解決方案不同，小程序的組件間的通訊簡單小巧。你可以和主頁面與組件通訊一樣，使用自定義事件來進行通訊，當(dāng)然更簡單方便的方法，是使用小程序提供的relations.

relations 是Component 構(gòu)造函數(shù)中的一個屬性，只要兩個組件的relations 屬性產(chǎn)生關(guān)聯(lián)，他們兩個之間就可以捕獲到對方，并且可以相互訪問，修改對方的屬性，如同修改自己的屬性一樣。

Component({
  relations:{
'./path_to_b': { // './path_to_b'是對方組件的相對路徑
       type: 'child', //  type可選擇兩組：parent和child、ancestor和descendant
       linked:function(target){ } // 鉤子函數(shù)，在組件linked時候被調(diào)用 target是組件的實例，
       linkChanged: function(target){}
       unlinked: function(target){}
}
},
})

比如說，有兩個組件如代碼所示：

// 組件a slot 包含了組件b
<a>
<b></b>
</a>

他們之間的關(guān)系如下圖所示：

image

</figure>

兩個組件捕獲到對方組件的實例，是通過 this.getRelationNodes('./path_to_a')方法。既然獲取到了對方組件的實例，那么就可以訪問到對方組件上的data, 也可以設(shè)置對方組件上的data, 但是不能調(diào)用對方組件上的方法。

// 在a 組件中
Component({
   relations:{
'./path_to_b': {
           type: 'child',
           linked:function(target){ } // target是組件b的實例，
           linkChanged: function(target){}
           unlinked: function(target){}
}
},
   methods:{
       test () {
var nodes = this.getRelationNodes('./path_to_b')
var component_b = nodes[0];

// 獲取到b組件的數(shù)據(jù)
           console.log(component_b.data.name)

// 設(shè)置父組件的數(shù)據(jù)
// 這樣的設(shè)置是無效的
this.setData({
               component_b.data.name:'ss'
})
// 需要調(diào)用對方組件的setData()方法來設(shè)置
           component_b.setData({
               name:'ss'
})
}
}
})

// 在b 組件里面
Component({
   relations:{
'./path_to_a': { //注意！必須雙方組件都聲明relations屬性
           type:'parent'
}
},
   data: {
       name: 'dudu'
}
})

注意：1. 主頁面使用組件的時候，不能有數(shù)字，比如說 <component_sub1> 或 <component_sub_1>，可以在主頁面的json 里面設(shè)置一個新名字

{
"usingComponents":{
"test_component_subb": "../../../components/test_component_sub2/test_component_sub2"
}
}

2. relations 里面的路徑，比如說這里：

image

</figure>

是對方組件真實的相對路徑，而不是組件間的邏輯路徑。

3. 如果relations 沒有關(guān)聯(lián)，那么 this.getRelationNodes 是獲取不到對方組件的

4. 本組件無法獲取本組件的實例，使用this.getRelatonsNodes('./ path_to_self ') 會返回一個null

4. type 可以選擇的 parent 、 child 、 ancestor 、 descendant

現(xiàn)在我們已經(jīng)可以做到了兩個組件之間的數(shù)據(jù)傳遞，那么如何在多個組件間傳遞數(shù)據(jù)呢？

image

</figure>`

如上圖所示，同級的組件b 和同級的組件c , b 和 c 之間不可以直接獲取，b可以獲取到a， c 也可以獲取到a，而a可以直接獲取到 b 和 c。所以，如果想獲取到兄弟元素，需要先獲取到祖先節(jié)點，然后再通過祖先節(jié)點獲取兄弟節(jié)點

我在組件b 里面，我需要先找到祖先組件a的實例，然后用祖先組件a的實例的getRelationNodes方法獲取到組件c的實例。

看見沒？恐怕我們又要寫一大堆重復(fù)性的代碼了。

幸好，微信小程序還提供了behavior 屬性, 這個屬性相當(dāng)于 mixin，很容易理解的，是提高代碼復(fù)用性的一種方法。

思路：

假設(shè)目前有三個組件，組件a, 組件b, 組件c， 其中組件b和組件c是兄弟組件，組建a是b和c的兄弟組件。為了減少代碼的重復(fù)性，我們把獲取父組件的方法，和獲取兄弟組件的方法封裝一下，封裝在 behavior 的 methods 中。只要是引入該behavior的組件，都可以便捷的調(diào)用方法。

實現(xiàn)：

新建一個behavior文件，命名無所謂，比如說relation_behavior.js

// 在 get_relation.js 文件里面
module.exports = Behavior({
    methods:{
// 獲取父組件實例的快捷方法
        _parent () {
// 如果根據(jù)該路徑獲取到acestor組件為null，則說明this為ancesor
var parentNode = this.getRelationNodes('../record_item/record_item')
if (parentNode&&parentNode.length !== 0) {
return parentNode[0]
} else {
return this
}
},
// 獲取兄弟組件實例的快捷方法
        _sibling(name) {
var node = this._parent().getRelationNodes(`../${name}/${name}`)
if (node &&node.length > 0) {
return node[0]
}
}
}
})

然后在組件b, 和 組件c 上引入該behavior，并且調(diào)用方法，獲取父組件和兄弟組件的實例

// 組件b中
var relation_behavior = require('./path_to_relation_behavior')
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 獲得父組件的實例
let parent = this._parent()

// 訪問父組件的數(shù)據(jù)d
           console.log(parent.data.name)

// 修改父組件的數(shù)據(jù)
           parent.setData({
               name: 'test1'
})

// 獲得兄弟組件的實例
let sibling = this._sibling('c')

// 訪問兄弟組件的數(shù)據(jù)
           console.log(sibling.data.name)

// 修改兄弟組件的數(shù)據(jù)
           sibling.setData({
               name:"test"
})
}
}
})

// 組件c中
var relation_behavior = require('./path_to_relation_behavior')
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 獲得父組件的實例
let parent = this._parent()

// 訪問父組件的數(shù)據(jù)d
           console.log(parent.data.name)

// 修改父組件的數(shù)據(jù)
           parent.setData({
               name: 'test1'
})

// 獲得兄弟組件的實例
let sibling = this._sibling('b')

// 訪問兄弟組件的數(shù)據(jù)
           console.log(sibling.data.name)

// 修改兄弟組件的數(shù)據(jù)
           sibling.setData({
               name:"test"
})
}
}
})

同時需要注意，c和b兩個組件，從relations屬性的角度來說，是a的后代組件。

但是組件b和組件c 所處的作用域, 都是主頁面的作用域，傳入的property都是主頁面的property，這樣就保證了組件數(shù)據(jù)的靈活性。relations 像一個隱形的鏈子一樣把一堆組件關(guān)聯(lián)起來，關(guān)聯(lián)起來的組件可以相互訪問，修改對方的數(shù)據(jù)，但是每一個組件都可以從外界獨立的獲取數(shù)據(jù)。

看了這么多理論的東西，還是需要一個具體的場景來應(yīng)用。

比如說，我們有個一個分享記錄圖片心情的頁面，當(dāng)用戶點擊【點贊】的按鈕時候，該心情的記錄 點贊按鈕會變紅，下面的一欄位置會多出點贊人的名字。

image

</figure>

如果不通過組件化，很可能的做法是 修改一個點贊按鈕，然后遍歷數(shù)據(jù)更新數(shù)據(jù)，最后所有記錄列表的狀態(tài)都會被重新渲染一遍。

如果是通過組件化拆分：把點贊的按鈕封裝為 組件b, 下面點贊人的框封裝為組件c, 每一個心情記錄都是一個組件a

image

</figure>

下面是代碼實現(xiàn)

// 在主頁面內(nèi)
<view wx:for='{{feed_item}}'>
<a item='{{item}}'>
<b></b>
<c></c>
</a>
<view>

// 在組件a內(nèi)
var behavior_relation = require('../../relation_behavior.js)  //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       '../b/b':{
           type: 'descendant'
       }
   }
})

// 在組件b內(nèi)
var behavior_relation = require('../../relation_behavior.js) //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation]
   relations:{
'../a/a':{
           type: 'ancestor'
}
},
   data: {
       is_like: false //控制點贊圖標(biāo)的狀態(tài)
},
   methods:{
// 當(dāng)用戶點贊的時候
       onClick () {
//  修改本組件的狀態(tài)
this.setData({
               is_like: true
})
// 修改 c 組件的數(shù)據(jù)
this._sibling('c').setData({
               likeStr: this._sibling('c').data.likeStr + '我' 
})
}
}
})

// 在組件c內(nèi)
var behavior_relation = require('../../relation_behavior.js)  //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       '../a/a':{
           type: 'ancestor'
       }
   },
   data:{
       likeStr:'曉紅，小明'
   }
})

這樣，組件b 可以修改組件c中的數(shù)據(jù)。同時，組件b 和 組件c 又可以通過 properties 和 事件系統(tǒng)，和主頁面保持獨立的數(shù)據(jù)通信。

*本文作者：杜俊成 *
原文地址：微信小程序組件化的解決方案
聲明：本文來源于網(wǎng)絡(luò)，版權(quán)歸作者所有，不代表本人觀點，有什么問題請聯(lián)系我，謝謝！