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

微信小程序 父子组件传值通信微信小程序父组件往子组件传值:父:<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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python入门教程:Day11-文件和异常

    Python入门教程:Day11-文件和异常

    2021年7月4日
    110
  • Spring Cloud入门操作手册(Hoxton)

    Spring Cloud入门操作手册(Hoxton)文章目录@[toc]springcloud介绍springcloud技术组成SpringCloud对比Dubbo一、service-服务二、commons通用项目新建maven项目pom.xmljava源文件pojoItemUserOrderserviceItemServiceUserServiceOrderServiceutilCookieUtilJsonUtilJso…

    2022年6月9日
    48
  • matplotlib无法显示图片_pycharm不出图

    matplotlib无法显示图片_pycharm不出图在学习Matplotlib的时候,在Pycharm中运行的时候不会弹出画的图像。首先你运行之后最小化pycharm,看看是不是已经出来了,只是没有自己弹到最顶层。 代码如下: importnumpyasnpimportmatplotlib.pyplotaspltdefmain():#线的绘制x=np.linspace(-np.p…

    2022年8月25日
    6
  • 1024,一封写给CSDN家园Python初学者的信 | Python初级、中级、高级学习路线

    1024,一封写给CSDN家园Python初学者的信 | Python初级、中级、高级学习路线又是一年1024,祝所有程序员节日快乐,健康开心,祝CSDN越来越好。转眼,已经在CSDN分享了十多年博客,感谢大家的陪伴和祝福,在这里我与许多人成为了朋友,感恩。非常遗憾,这次没能去长沙岳麓书院见很多大佬和博友,下次有机会一定去。我也会继续加油,分享更好更系统的文章,帮助更多初学者。总之,感恩大家能一起在CSDN相遇,相见,相知,我们相约在这里分享一辈子,感恩同行!

    2022年4月29日
    50
  • 山西计算机中考操作题,2017山西中考物理实验操作试题发布

    山西计算机中考操作题,2017山西中考物理实验操作试题发布一、2017年山西省中考物理命题依据《义务教育物理课程标准(2011年版)》是2017年山西中考物理试题的唯一命题依据.二、2017年山西省中考物理命题原则1.总原则(1)内容:强化学科核心内容,弱化枝端末节内容.(2)结构:强化良好结构的知识,弱化零散的知识.(3)测查能力层次:强化概念、原理的理解与应用,及分析、综合等思维能力;弱化单纯的事实和内容记忆.(4)测查角度:强化学生理解了哪些,弱…

    2022年5月18日
    36
  • 图像视频滤镜算法详解—滤镜初识

    图像视频滤镜算法详解—滤镜初识   所谓滤镜,最初是指安装在相机镜头前过滤自然光的附加镜头,用来实现调色和添加效果,也就是硬件滤镜。我们做的滤镜算法又叫做软件滤镜,是对大部分硬件镜头滤镜进行的模拟,当然,误差也就再所难免,我们的宗旨只是无限逼近。也是这个原因,我们无法再现真实的拍摄场景,无法复原照片中未包含的信息,进而也难以实现某些特殊滤镜效果,诸如偏光镜和紫外线滤色镜(UV)的效果等等。目前,从强大的PHOTO…

    2022年7月22日
    8

发表回复

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

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