美文网首页
微信小程序父子组件传值

微信小程序父子组件传值

作者: Gaochengxin | 来源:发表于2019-03-11 14:39 被阅读0次

    微信小程序父组件往子组件传值:
    父:<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>
    通过phone=”{{phone}}”传向子组件
    子:

     properties: {
       phone: {            // 属性名
        type: Number,     // 类型(必填),目前接受的类型包括:String, 
      Number, Boolean, Object, Array, null(表示任意类型)
        value: ''     // 属性初始值(可选),如果未指定则会根据类型选 
    择一个
        }
      },
    

    然后在methods的自定义函数里面通过this.data.phone就能接收到

    子组件往父组件传值:
    分为两种情况:1、手动触发获取;2、自动填充
    (1)比如子组件中一个输入框的值<input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx' value='{{codes}}'></input>
    我们在子组件中的method中定义一个函数:

    bindCode: function (e) {
          var that = this;
         var val = e.detail.value; //通过这个传递数据
      var myEventDetail = {
        val: val
      } // detail对象,提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名 
        称事件,父组件中使用
      }
    

    父组件要获取:

    bind:myevent="onGetCode"父组件的定义事件(myevent是子组件传递过来的自定义事件名称)
    //事件函数 ,e.detail.val就是需要的值

           onGetCode:function(e){
            this.setData({
            code:e.detail.val
          })
        },
    

    (2)还是这个输入框,我们想在子组件中内部处理完数据,就像让输入框自己赋上值,不需要父组件的手动触发。
    首先在子组件内部,把处理好的数据赋值给自己内部的data,然后调取自身的传递函数,在传值的时候判断一下,拼接上处理好的数据就可以。
    子组件:

     bindCode: function (e) {
      var that = this;
      var val = e.detail.value == undefined ? that.data.codes : e.detail.value;
       //这里针对输入框,判断e.detail.value(是否手动输入了值,没有输入直接赋值处理好的that.data.codes,如果输入了值,就直接使用e.detail.value)传递给父组件
      var myEventDetail = {
        val: val
      } // detail对象,提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail)
    }
    

    在处理数据的函数中:

    getCode:function(e){
    //处理逻辑。。。。
    this.bindCode(e) //一定传参数 e
    }

    父组件获取:

       onGetCode:function(e){
          this.setData({
         code:e.detail.val   //赋值到父组件的data集合
       })
    },
    

    小程序的子组件在进行bindinput=”bindCode”时,父组件的bind:myevent=”onGetCode”也被触发了,只不过是在

    this.triggerEvent('myevent', myEventDetail)
    1
    这个代码之前先触发子组件的处理逻辑,然后加上这句就是父组件的事件触发,在这句之后的逻辑是父组件触发后再触发。执行顺序是:子组件—>父组件—->子组件其他逻辑

    相关文章

      网友评论

          本文标题:微信小程序父子组件传值

          本文链接:https://www.haomeiwen.com/subject/pwfbpqtx.html