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

微信小程序 父子组件传值通信微信小程序父组件往子组件传值:父:<getCodephone="{{phone}}"bind:myevent="onGetCode"></getCode>通过phone=”{{phone}}”传向子组件子:properties:{phone:{//属性名type:Number,…

大家好,又见面了,我是你们的朋友全栈君。

微信小程序父组件往子组件传值:
父:<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.net/145366.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 公司的报表工具太难用,我三天撸了个Excel工具,运营小姐姐直呼太好用了,现已开源!!(建议收藏)

    公司的报表工具太难用,我三天撸了个Excel工具,运营小姐姐直呼太好用了,现已开源!!(建议收藏)冰河手把手教你撸Excel报表工具,俘获运营小姐姐的心,一起加油,搞起来!!冰河强烈建议收藏!!

    2022年6月28日
  • 多元函数求极值,万能函数——fmincon讲解

    多元函数求极值,万能函数——fmincon讲解    matlab中的函数fmincon可用于求可以求取多元函数的极值,其约束包括五种:1、线性不等式约束;2、线性等式约束;3、变量约束;4、非线性不等式约束;5、非线性等式约束。其形式如下:x=fmincon(fun,x0,A,b,Aeq,beq,lb,ub,nonlcon)求解问题的标准型为minF(X)s.tAX&lt;=b(线性不等式约束)AeqX=beq(线性等式…

    2022年5月3日
  • websocket设置header(HttpCanary)

    OkHttpClient的性能要优于HttpClient,因此本例来教大家如何配置使用它.在要使用的地方直接@Autowired即可:测试:

    2022年4月16日
  • 纯CSS实现“精灵图”动态特效

    纯CSS实现“精灵图”动态特效一、什么是精灵图?什么的是精灵图呢?首先我们来看了一下京东官网的一个例子:鼠标移入之前这个“相机”的是白色的,移入之后变为了红色:这就是一个精灵图的案例。二、素材准备javascript里面有一个经典的“开关灯”实例,其中是用到了两种颜色灯泡的图片,利用click()点击事件实现“开关灯”的动态效果。我们这里不使用JS,只用一张图片,利用CSS实现。素材只需要一张图片:只要我们改…

    2022年6月5日
  • Python使用py2exe打包exe程序[通俗易懂]

    Python使用py2exe打包exe程序[通俗易懂]py2exe可以将Python程序打包成exe程序,使得可以在没有Python环境的机器上运行。

    2022年9月11日
  • 智能算法学习总结

    智能算法学习总结本科的时候学习了智能信息处理这门课程,所使用的教材是《计算智能》张军,詹志辉.计算智能[M].清华大学出版社,2009.11之前回忆了一下一些还有点记忆的算法,写了一点博客如下:1、神经网络的基础知识与简单分类编程https://blog.csdn.net/SweeNeil/article/details/865313842、模糊逻辑基本原理与编程https://…

    2022年6月22日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号