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

微信小程序 父子组件传值通信微信小程序父组件往子组件传值:父:<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)

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145366.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 人生的思考——温水中被煮熟的程序员

    很多时候我们不去行动,并不是我们不想去行动,而是我们不知道该从什么地方开始!怕什么真理无穷,进一步有一步的欢喜怕什么路途遥远。走一步有一步的风景

  • kong笔记——认识kong

    kong笔记——认识kong背景最近公司打算重构API网关,给定的硬性条件是支持lua脚本,kubernetes可部署,可解析lua,另外需要支持身份认证,IP黑白名单,限流,负载均衡等一些功能,为此,在技术选型上锁定了kong以及APISIX,最终选择了kong。(原因:稳定性第一,性能第二,拓展性第三,社区未来发展第四)为什么选择kong其实抛开lua的支持,kong的一些功能点还是很吸引我的,比如天生支持API网关的基本特性(权限控制,安全,负载均衡,请求分发,监控等等),即开箱即用。如果我们选择了zuul,当需要为应

  • 基于时间的反向传播算法BPTT(Backpropagation through time)[通俗易懂]

    基于时间的反向传播算法BPTT(Backpropagation through time)[通俗易懂]本文介绍BPTT的原理和实现,是读“RecurrentNeuralNetworksTutorial,Part3–BackpropagationThroughTimeandVanishingGradients”的读书笔记,代码也来自于这篇文章,加了部分注释。

  • 高校 网络安全_网络安全之道

    高校 网络安全_网络安全之道助力高校行业网络安全

  • Linux进程调度_linux进程的查看和调度

    Linux进程调度_linux进程的查看和调度进程调度含义进程调度决定了将哪个进程进行执行,以及执行的时间。操作系统进行合理的进程调度,使得资源得到最大化的利用。在单片机上,常常使用的方式是:系统初始化—-&gt;while(1){}。(当然,单片机也可以跑类似FreeRTOS,也可以有进程切换)在带操作系统的CPU上跑的逻辑是,允许多个进程(其实就是程序)”同时”跑。比如,你可以在操作鼠标的同时,进行音乐播放,文字…

  • 猿创征文|点亮JAVA技术之灯(线程篇)「建议收藏」

    猿创征文|点亮JAVA技术之灯(线程篇)「建议收藏」线程安全就是说多线程访问同一段代码,不会产生不确定的结果。又是一个理论的问题,各式各样的答案有很多,我给出一个个人认为解释地最好的:如果你的代码在多线程下执行和在单线程下执行永远都能获得一样的结果,那么你的代码就是线程安全的。(1)不可变像String、Integer、Long这些,都是final类型的类,任何一个线程都改变不了它们的值,要改变除非新创建一个,因此这些不可变对象不需要任何同步手段就可以直接在多线程环境下使用(2)绝对线程安全不管运行时环境如何,调用者都不需要额外的同步措施。……….

    2022年10月22日

发表回复

您的电子邮箱地址不会被公开。

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