組件
前端開發現在都講究組件化開發，甚至有的面試官會問啥叫組件化開發。初次聽到這個詞還是在剛找工作的時候，被面試官問到。當時並沒有對一些專業詞匯太過關注，因此被問懵了。其實組件化開發，說白了就是，將一部分ui以及樣式甚至邏輯抽離出來組成一個單獨的文件（模塊），然后可以在多個地方使用，需要的數據源有一定的格式規則，產出也是有一定的規則（相同的輸入會產生相同的輸出）。組件化開發的好處是：增加代碼復用性，減少代碼量，提高開發效率、便於代碼維護、提高系統設計。
那么當使用組件的時候，就會涉及到數據流向、事件傳遞的問題。（除非是某些固定的 UI 展示類，不用邏輯，可以簡單的寫死，類似於靜態頁）。父組件使用子組件，那么父組件就需要給子組件傳值。子組件發生的操作，需要通知父組件，那么就需要將事件或者產生的結果通知到父組件。這就是父子組件的通信。A組件使用B組件，則A是父組件，B是子組件。主要說說，小程序中的父子組件通信和事件的傳遞。
先看代碼：
父組件
// home.wxml 文件
<view class="container">
<view class="list-wrap">
<view class="list-item" wx:for="{{list}}" wx:for-item="paper" wx:for-index="idx" wx:key="idx">
<list-item id="paperItem" paper="{{paper}}" bind:likeFun="likeFun" bind:collectFun="collectFun" />
</view>
</view>
</view>
// home.json
"usingComponents": {
"list-item": "../components/listItem/listItem"
}
子組件
// listItem 組件
<!--pages/components/listItem.wxml-->
<view class="list-item">
<view class="item-title">{{paper.title}}</view>
<view class="item-author">作者：{{paper.author}}</view>
<view class="item-action">
<view class="action-like" bindtap="likeClick" >點贊：{{paper.like}}</view>
<view class="action-collect" bindtap="collectClick" >收藏：{{paper.collect}}</view>
</view>
</view>
// listItem.json
{
"component": true,
"usingComponents": {}
}
// listItem.wxss 是樣式文件，僅對這個組件有效
// listItem.js
// pages/components/listItem.js
Component({
/**
* 組件的屬性列表
*/
properties: {
paper: Object
},
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
likeClick: function() {
console.log('like');
let obj = {
type: 'click',
event: 'like'
}
this.triggerEvent("likeFun", obj)
},
collectClick: function() {
console.log('collect');
let obj = {
type: 'tap',
event: 'collect'
}
this.triggerEvent("collectFun", obj)
}
}
})
// 點擊點贊打印：
like
==外部事件1== {type: "click", event: "like"}
// 點擊收藏打印：
collect
==外部事件2== {type: "tap", event: "collect"}
解釋0
父組件通過屬性的方式（paper），將自己的數據傳遞給子組件使用，子組件要使用父組件的數據，只能是通過屬性的方式接受傳遞。
父組件通過 bind方法，綁定一個自己的方法，然后傳給子組件一個方法。
子組件通過調用 trigger 方法來執行父組件的方法，並將子組件的值通過參數傳遞給父組件。父組件在 e.detail 中獲取到子組件傳出來的值，這樣就完成了父子組件間的通信（數據傳遞、事件執行）。
triggerEvent 還可以接受第三個參數來確認事件是否冒泡、事件是否可以穿越組件邊界、事件是否擁有捕獲階段。
附上微信鏈接
獲取組件實例
因為微信和Vue、React類似屬於數據驅動視圖更新，因此一般不用獲取實例。微信小程序提供了獲取組件實例的方法：this.selectComponent("選擇器")
比如：const child = this.selectComponent('#paperItem');
若需要自定義 selectComponent 返回的數據，可使用內置 behavior: wx://component-export。
使自定義組件中支持 export 定義段，這個定義段可以用於指定組件被 selectComponent 調用時的返回值。