微信小程序-组件通信

一.父组件向子组件传值

以checkbox为例子,自定义一个checkbox组件,定义properties属性的checked值,当父组件checked值为true,则默认勾选。

父组件代码

<custom-checkbox  position="right" checked="true">
hello,slot
</custom-checkbox>

子组件代码:

<checkbox class="checkbox" checked="{{isCheck}}" 
bind:tap="update"></checkbox>

父组件将值传递到properties的checked属性,此时需要在JS中将checked的值赋给data中定义的isCheck才会使checkbox默认勾选

  //使用data接收properties的值
  observers:{
    checked:function(newChk){
      this.setData({
        isCheck:newChk
      })
      }
  }

二.子组件向父组件传值

1.子组件也就是自定义组件使用triggerEvent方法发射一个自定义事件,同时将可以将数据携带在event的detail参数里面

2.父组件可以在使用组建的过程中,使用bind绑定自定义事件进行数据的接收,bind:自定义事件

子组件发送数据:

  /**
   * 组件的初始数据
   */
  data: {
    ojb:{
      name:'jerry'
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendData(){
      //发射自定义事件
      this.triggerEvent('myEvent',this.data.ojb)
    }
  }

父组件接收数据:

首先进行事件绑定

<view>{{obj.name}}</view>
<custom05 bind:myEvent="getData"/>

在getData方法里面接收event事件参数,属性detail里面有子组件传递值

//获取子组件
  getData(event){
    console.log(event)
    this.setData({
      obj:event.detail
    })
  }

三.父组件通过selectComponent方法获取子组件对现象

在调用子组件的时候添加ID或者CLASS选择器comp

<custom-checkbox  position="right" checked="true" bind:myEvent="getData"
class="comp" id="comp">

使用selectComponent方法获取子组件对象,数据放在对象的data属性里

需要注意的是class使用.class, id使用#id进行传值

 getComponet(){
    //获取组件对象 .class + #id
    const res = this.selectComponent('.comp')
    console.log(res.data.isCheck)
  }
相关推荐
编程千纸鹤2 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域3 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域16 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650217 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节