微信小程序父子组件传值通信

全栈程序员站长

发布于 2022-08-29 18:00:14

1.3K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：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)

这个代码之前先触发子组件的处理逻辑，然后加上这句就是父组件的事件触发，在这句之后的逻辑是父组件触发后再触发。执行顺序是：子组件—>父组件—->子组件其他逻辑

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145366.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月1，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度