微信小程序父組件往子組件傳值:
父:<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>
通過(guò)phone=”{{phone}}”傳向子組件
子:
properties: {
phone: { // 屬性名
type: Number, // 類(lèi)型(必填),目前接受的類(lèi)型包括:String,
Number, Boolean, Object, Array, null(表示任意類(lèi)型)
value: '' // 屬性初始值(可選),如果未指定則會(huì)根據(jù)類(lèi)型選
擇一個(gè)
}
},
然后在methods的自定義函數(shù)里面通過(guò)this.data.phone就能接收到
子組件往父組件傳值:
分為兩種情況:1、手動(dòng)觸發(fā)獲妊扰鳌续搀;2嵌洼、自動(dòng)填充
(1)比如子組件中一個(gè)輸入框的值<input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx' value='{{codes}}'></input>
我們?cè)谧咏M件中的method中定義一個(gè)函數(shù):
bindCode: function (e) {
var that = this;
var val = e.detail.value; //通過(guò)這個(gè)傳遞數(shù)據(jù)
var myEventDetail = {
val: val
} // detail對(duì)象篡石,提供給事件監(jiān)聽(tīng)函數(shù)
this.triggerEvent('myevent', myEventDetail) //myevent自定義名
稱(chēng)事件属提,父組件中使用
}
父組件要獲取:
bind:myevent="onGetCode"父組件的定義事件(myevent是子組件傳遞過(guò)來(lái)的自定義事件名稱(chēng))
//事件函數(shù) 病往,e.detail.val就是需要的值
onGetCode:function(e){
this.setData({
code:e.detail.val
})
},
(2)還是這個(gè)輸入框捣染,我們想在子組件中內(nèi)部處理完數(shù)據(jù),就像讓輸入框自己賦上值停巷,不需要父組件的手動(dòng)觸發(fā)耍攘。
首先在子組件內(nèi)部,把處理好的數(shù)據(jù)賦值給自己內(nèi)部的data畔勤,然后調(diào)取自身的傳遞函數(shù)蕾各,在傳值的時(shí)候判斷一下,拼接上處理好的數(shù)據(jù)就可以庆揪。
子組件:
bindCode: function (e) {
var that = this;
var val = e.detail.value == undefined ? that.data.codes : e.detail.value;
//這里針對(duì)輸入框式曲,判斷e.detail.value(是否手動(dòng)輸入了值,沒(méi)有輸入直接賦值處理好的that.data.codes缸榛,如果輸入了值吝羞,就直接使用e.detail.value)傳遞給父組件
var myEventDetail = {
val: val
} // detail對(duì)象,提供給事件監(jiān)聽(tīng)函數(shù)
this.triggerEvent('myevent', myEventDetail)
}
在處理數(shù)據(jù)的函數(shù)中:
getCode:function(e){
//處理邏輯仔掸。脆贵。。起暮。
this.bindCode(e) //一定傳參數(shù) e
}
父組件獲取:
onGetCode:function(e){
this.setData({
code:e.detail.val //賦值到父組件的data集合
})
},
小程序的子組件在進(jìn)行bindinput=”bindCode”時(shí)会烙,父組件的bind:myevent=”onGetCode”也被觸發(fā)了负懦,只不過(guò)是在
this.triggerEvent('myevent', myEventDetail)
1
這個(gè)代碼之前先觸發(fā)子組件的處理邏輯,然后加上這句就是父組件的事件觸發(fā)柏腻,在這句之后的邏輯是父組件觸發(fā)后再觸發(fā)纸厉。執(zhí)行順序是:子組件—>父組件—->子組件其他邏輯