微信小程序父子組件傳值

微信小程序父組件往子組件傳值:
父:<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í)行順序是:子組件—>父組件—->子組件其他邏輯

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁(yè)中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實(shí)現(xiàn)同一個(gè)目標(biāo),兩種不同的方式....
    itclanCoder閱讀 26,238評(píng)論 1 12
  • 因新工作主要負(fù)責(zé)微信小程序這一塊,最近的重心就移到這一塊,該博客是對(duì)微信小程序整體的整理歸納以及標(biāo)明一些細(xì)節(jié)點(diǎn),初...
    majun00閱讀 7,633評(píng)論 0 9
  • 作為一個(gè)合格的開發(fā)者,不要只滿足于編寫了可以運(yùn)行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個(gè)周閱讀 8,665評(píng)論 1 33
  • 什么樣的人風(fēng)風(fēng)火火、熱情洋溢,有著使不完的精力? 丙火的特性是什么?代表什么樣的性格和哪些身體部位? 丙火日干的女...
    曙雀星河閱讀 5,287評(píng)論 0 4
  • 晚上,接閨女回家。奶奶回老家了,閨女心里有點(diǎn)落寞。我跟她說(shuō):“奶奶回家收拾收拾,好準(zhǔn)備我們回家過年,不能...
    梓墨麻麻閱讀 184評(píng)論 0 0

友情鏈接更多精彩內(nèi)容