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

微信小程序 父子组件传值通信微信小程序父组件往子组件传值:父:<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)
上一篇 2022年5月17日 下午3:20
下一篇 2022年5月17日 下午3:20


相关推荐

  • Java基础–运行第一个Java程序HelloWorld

    Java基础–运行第一个Java程序HelloWorldjava 目前发行了很多版本 公司用的最多的是 1 8 的版本 相对而言会比较稳定 java 的其中一个特性 跨平台 可以在 windows linux macos 操作系统下运行 java 跨平台的原

    2026年3月18日
    2
  • Pycharm远程连接服务器(windows下远程修改服务器代码)[通俗易懂]

    Pycharm远程连接服务器(windows下远程修改服务器代码)[通俗易懂]http://blog.csdn.net/duankaifei/article/details/418986411、写在前面  之前一致用putty,ssh,修改代码,或者本地修改,上传到服务器,各种不爽,现在改用xshell,但是有时候还是不方便感觉,于是自己配置了远程连接pycharm,这样不用总是到代码里修改,直接在windows下pycharm里修改再保存就可以实现同步更新

    2022年8月29日
    5
  • java.util.Map——Map集合的常用方法「建议收藏」

    java.util.Map——Map集合的常用方法「建议收藏」Java技术交流群:817997079,欢迎“有志之士”的加入。开发中最常用的就是List集合和Map集合,Map集合是基于java核心类——java.util中的;Map集合用于储存元素对,Map储存的是一对键值(key和value),是通过key映射到它的value;下面介绍的是Map集合的一些经常用到的方法以及代码示例。1.map.size();方法作用:获取map集合类的大小(m…

    2022年5月7日
    47
  • anaconda卡在initializing_6p报错9

    anaconda卡在initializing_6p报错9ERROR:Cannotuninstall’PyYAML’.Itisadistutilsinstalledprojectandthuswecannotaccuratelydeterminewhichfilesbelongtoitwhichwouldleadtoonlyapartialuninstall.啥也不说,就一条安装指令:pipinstall–ignore-installedPyYAML其他的坑,自辨吧…

    2022年8月30日
    7
  • 某些软件点击导出时出现NavigationCancelled错误解决方法

    某些软件点击导出时出现NavigationCancelled错误解决方法原因一般是由于http页面跳转到https页面或者反之的情形造成IE浏览器判定为安全隐患,所以终止打开页面。解决方法:1.打开Internet属性窗口,可以由以下三种方法打开。三种方法任选其一a)打开IE浏览器,点击“工具”或者右侧齿轮图标,选中“Internet选项”b)运行中,输入“inetcpl.cpl”,回车,如下图c)在控制面板中,选中“Internet选…

    2022年7月26日
    11
  • OHEM的pytorch代码实现细节

    OHEM的pytorch代码实现细节详细解读一下OHEM的实现代码:defohem_loss(batch_size,cls_pred,cls_target,loc_pred,loc_target,smooth_l1_sigma=1.0):”””Arguments:batch_size(int):numberofsampledroisforbboxhe…

    2022年5月29日
    104

发表回复

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

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