微信小程序父組件往子組件傳值:
父:<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>
通過phone=”{{phone}}”傳向子組件
子:
properties: {
phone: { // 屬性名
type: Number, // 類型(必填),目前接受的類型包括:String,
Number, Boolean, Object, Array, null(表示任意類型)
value: '' // 屬性初始值(可選),如果未指定則會(huì)根據(jù)類型選
擇一個(gè)
}
},
然后在methods的自定義函數(shù)里面通過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; //通過這個(gè)傳遞數(shù)據(jù)
var myEventDetail = {
val: val
} // detail對(duì)象,提供給事件監(jiān)聽函數(shù)
this.triggerEvent('myevent', myEventDetail) //myevent自定義名
稱事件,父組件中使用
}
父組件要獲?。?/p>
bind:myevent="onGetCode"父組件的定義事件(myevent是子組件傳遞過來(lái)的自定義事件名稱)
//事件函數(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)輸入了值,沒有輸入直接賦值處理好的that.data.codes,如果輸入了值,就直接使用e.detail.value)傳遞給父組件
var myEventDetail = {
val: val
} // detail對(duì)象,提供給事件監(jiān)聽函數(shù)
this.triggerEvent('myevent', myEventDetail)
}
在處理數(shù)據(jù)的函數(shù)中:
getCode:function(e){
//處理邏輯。。。。
this.bindCode(e) //一定傳參數(shù) e
}
父組件獲?。?/p>
onGetCode:function(e){
this.setData({
code:e.detail.val //賦值到父組件的data集合
})
},
小程序的子組件在進(jìn)行bindinput=”bindCode”時(shí),父組件的bind:myevent=”onGetCode”也被觸發(fā)了,只不過是在
this.triggerEvent('myevent', myEventDetail)
1
這個(gè)代碼之前先觸發(fā)子組件的處理邏輯,然后加上這句就是父組件的事件觸發(fā),在這句之后的邏輯是父組件觸發(fā)后再觸發(fā)。執(zhí)行順序是:子組件—>父組件—->子組件其他邏輯