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

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


相关推荐

  • 软件激活成功教程官网_激活成功教程软件资源

    软件激活成功教程官网_激活成功教程软件资源[转]国内软件激活成功教程下载网站列表!Postedon2005-04-2511:17Laser.NET阅读(872)评论(1)编辑收藏国内最有信誉的激活成功教程下载网站,总能让你有意外收获。18DD资源中心:http://www.18dd.com7年:http://www.7year.com/热战软件园:http://soft.rezhan.comwqsky:http…

    2022年10月11日
    4
  • Maven安装与配置,Idea配置Maven

    Maven安装与配置,Idea配置Maven一、安装本地Maven官网下载传送门1.我使用的是3.6.1版本maven-3.6.1-bin.zip二、安装把下载好的maven压缩包解压到一个没有中文,空格或其他特殊字符的文件夹,如:三、配置环境变量1.右键此电脑->属性->高级系统设置->环境变量2.新建变量MAVEN_HOME3.编辑变量Path,添加变量值%MAVEN_HOME%\bin%MAVEN_HOME%\bin4.验证安装是否成功,win+R运行cmd,输入mvn-v,如图所示则配置成

    2022年8月22日
    7
  • Python进阶(九)Python陷阱:Nonetype「建议收藏」

    Python进阶(九)Python陷阱:Nonetype「建议收藏」而在上面的程序中,虽然高阶函数calc_prod()有返回值ff,但是ff()却没有返回值,则传递到外层函数calc_prod()同样没有返回值,故输出了。针对这一问题,自己在IDEA中进行了调试,发现果然多输出了一行None。只有值可以改变,其他只读。之所以出现是因为定义了一个变量或函数,却没有值或者返回值,因此会默认值为。发现b的值确实为None,且其类型为NoneType。若代码改为如下所示,则可以完美实现列表的输出。它不支持任何运算也没有任何内建方法。对象具有三个特性:身份、类型、值。

    2025年8月24日
    2
  • USB转232和485的区别

    1串口串口,即串行通信接口,与之相对应的另一种接口叫并口,并行接口。两者的区别是,传输一个字节(8个位)的数据时,串口是将8个位排好队,逐个地在1条连接线上传输,而并口则将8个位一字排开,分别在8条连接线上同时传输,也就是进行数据传输的接口串口是一种物理接口形式,(硬件)通常指COM接口,当然这些接口有着很多标准接口标准:串口通信的接口标准有很多,而我们所了解的RS-23…

    2022年4月7日
    80
  • com.jcraft.jsch.JSchException: Auth fail

    背景服务器信息: 服务器A:10.102.110.1 服务器B:10.102.110.2 需要从服务器A通过Sftp传输文件到服务器B。应用项目中有一个功能,要通个关Sftp进行日志文件的传输,在部署的时候,服务器之间已经配置了免认证(密),也就sftp免密登录,但是部署完项目后,启动服务,在需要传输的时候还是报了下面的错误: com.jcraft.jsch.JSchExcep…

    2022年2月27日
    339
  • jsp中重定向与转发的区别_jsp重定向语句是什么

    jsp中重定向与转发的区别_jsp重定向语句是什么jsp中重定向和转发的区别:

    2025年10月1日
    2

发表回复

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

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