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

微信小程序 父子组件传值通信微信小程序父组件往子组件传值:父:<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动态心形代码简单_python 心形

    python动态心形代码简单_python 心形0.最终效果1.绘制一条心形曲线最近看到个视频,打算绘制个心型动态的曲线。1.1Matlab确定图像及其函数网上有很多关于心形曲线的资料,各种各样的形状,但是我比较倾心于桃心形。先在Matlab里简单看一下是什么样的。桃心形曲线的方程如下x=16sin^3(t)y=13cos(t)-5cos(2t)-2cos(3t)-cos(4t)Matlab绘制效果如下:Matlab程序如下。clcc…

    2022年9月25日
    3
  • Sift算子特征点提取、描述及匹配全流程解析

    Sift算子特征点提取、描述及匹配全流程解析Sift 之前的江湖在 Sift 横空出世之前 特征点检测与匹配江湖上占据霸主地位的是角点检测家族 先来探究一下角点家族不为人知的恩怨情仇 角点家族的族长是 Moravec 在 1977 年提出的 Moravec 角点检测算子 它是一种基于灰度方差的角点检测方法 该算子计算图像中某个像素点沿水平 垂直方向上的灰度差异 以确定角点位置 Moravec 是第一个角点检测算法 也是角点家族的开山鼻祖 角点

    2025年11月20日
    3
  • Idea激活码最新教程2024.2版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2024.2版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2024 2 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2024 2 成功激活

    2025年5月28日
    8
  • 21计算机保研经验分享

    21计算机保研经验分享保研最终去向:哈工大威海-计算机个人情况:学校是211计算机弱校,rank7%;个人有数学建模,小程序,网安的省级奖,几个小科研项目,一段工作室经历,擅长后端搬砖。无论文;自我感觉算是保研er水平一般的,我这个去向怎么样啊,欢迎留言面经:吉林大学软件工程+哈工大威海计算机面试经验分享马上写好一、夏令营夏令营经历:北理工网安入营+时间冲突放弃,只能说非常可惜;吉林大学软件入营+优秀营员;哈工大威海计算机入营+面试合格(共投递11所学校学院,只有两个真正参加,但万幸都有收获)吉林大学软件工程

    2022年5月9日
    59
  • python 制作淘宝秒杀脚本

    python 制作淘宝秒杀脚本1. 安装pycharm。网上教程很多。2. 安装Selenium库。Selenium支持很多浏览器,我选择的是Firefox浏览器。因为我这里是Python3环境,自带的又pip,所以安装selenium直接使用pip安装安装方法:–打开cmd;–输入命令进入Python36/Scripts(找到下图的目录)目录下;–输入命令pipinstalls…

    2022年5月5日
    53
  • python 下载百度文库_百度文库随便下载,解除限制「建议收藏」

    阅读须知:文章介绍的软件下载地址载文末,需要复制链接到浏览器打开今天有小伙伴在群里问有没有百度文库的下载工具,其实之前推荐过,但目前有新的工具出现了,而且更加好用,所以给大家更新一下百度文档0.95吾爱大神力作,软件是用python写的,跟其他下载器相比,优点就是能下载源文档,以前的冰点也很好用,但缺点是下载的是pdf文件,还需要转换,而这款软件相对来说方便多了纯文字文档下载之后是doc文件,图文…

    2022年4月13日
    63

发表回复

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

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