前言
小程序父子組件直接的通信以及實時觸發(fā)子組件數(shù)據(jù)更新
- WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)瞒御，僅能設(shè)置 JSON 兼容數(shù)據(jù)
- 事件：用于子組件向父組件傳遞數(shù)據(jù)拱燃，可以傳遞任意數(shù)據(jù)腾仅。
- 如果以上兩種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實例對象璃俗，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法奴璃。
- 子組件使用observers做數(shù)據(jù)監(jiān)聽，可以用于監(jiān)聽和響應任何屬性和數(shù)據(jù)字段的變化城豁。從小程序基礎(chǔ)庫版本 2.6.1 開始支持苟穆。
一、父組件傳遞給子組件傳值
<!--父組件 wxml-->
<launch id="launch" info="{{staffInfo}}"></launch>
<!--父組件 js-->
this.setdata({ // 必須使用this.setData()賦值
staffInfo: 'xxx',
})
<!-- 子組件接收 -->
properties: {
info: {
type: String, // 數(shù)據(jù)類型校驗
value: '', // 默認字符串
}
}
一般情況下如果中的變量沒有涉及到更改view試圖唱星，不建議使用this.setData()賦值雳旅，直接使用this.data.xx = xx；有利于小程序性能间聊，但是和頁面有交互的變量必須使用this.setData()攒盈，包括給子組件傳值
二、子組件傳值給父組件
<!-- 子組件-->
this.triggerEvent('customevent', { callBack: 'partake' }) // custoevent: 事件哎榴， {}中的內(nèi)容是給父組件穿的值
<!-- 父頁面-->
<launch id="launch" bindcustomevent="fetActiveDetail"></launch>
<!-- 父頁面js-->
fetActiveDetail(call) {} // call子組件傳遞上來的數(shù)據(jù)
三型豁、父組件直接獲取子組件數(shù)據(jù)
這里我們需要給子組件設(shè)置一個id，使用this.selectComponent尚蝌，這里我們只討論該方法迎变，自定義組件使用方法還有很多，具體可以參考這里飘言，熟讀文檔還是很有必要的衣形。
this.selectComponent('#launch') // 獲取的值可以參看下圖
image
這樣父組件就拿到了子組件的所有屬性，和方法了姿鸿。想獲取子組件什么直接用谆吴。看起來很方便
四般妙、子組件使用observers做數(shù)據(jù)監(jiān)聽，根據(jù)父組件動態(tài)數(shù)據(jù)實時更新子組件UI
<!-- 子組件 -->
// 寫法一：可以監(jiān)聽多個屬性
observers: {
'canvasUrl'(data){ // canvasUrl: 父組件傳遞過來的值
console.log('路徑變化了')
}
},
data: {
name: "partake",
},
// 寫法二：只監(jiān)聽單個屬性
properties: {
canvasUrl: {
type: String,
value: '',
observer(nv, ov, path) {
if (nv) {
this.setData({
img: nv
})
}
}
},
},
這種模式下相速，父組件數(shù)據(jù)更新碟渺，子組件也跟著變化
