微信小程序16: 组件通信

父子组件之间的通信

父子组件通信一共有三种方式

  1. 属性绑定
    1. 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据
  2. 事件绑定
    1. 用于子组件向父组件传递数据,可以传递任意数据
  3. 获取组件实例
    1. 父组件还可以通过this.selectComponent()获取子组件的实例对象
    2. 这样可以访问子组件的任意数据和方法

属性绑定

:::info

父组件向子传值

:::

属性绑定用于实现父向子传值,而且智能传递普通的类型的数据,无法将方法进行传递。

html 复制代码
//父组件定义data数据节点
data:{
  count:0
}

//父组件的wxml结构
<!-- 父组件向子组件传递count值 -->
<mytest1 count="{{count}}"></mytest1>
<view></view>
<view>父组件的count值为{{count}}</view>

在子组件内部需要声明对应的属性并使用

html 复制代码
// 子组件的properties节点
properties:{
  count: Number
}

// 子组件的wxml结构
<text>子组件中,countr值为{{count}}</text>

事件绑定

:::info

事件绑定用于实现子向父传值,可以传递任何类型的数据

:::

  1. 在父组件中的js,定义一个函数,这个函数通过自定义事件的形式,传递给子组件
javascript 复制代码
//在父组件中定义 syncount方法
// 将来,这个会被传递给子组件,供子组件调用
syncCount(){
  console.log("syncount");
},
  1. 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件,定义自定义事件sync
html 复制代码
<mytest1 count="{{count}}" bind:sync="syncCount">
  <view slot="slot1">我是插槽1的内容 </view>
  <view slot="slot2">我是插槽2的内容 </view>
</mytest1>
  1. 在子组件的js中,通过调用this.triggerEvent("自定义事件名称",{/参数对象/}),将数据发送到父组件,我想实现在子组件中增加树脂,然后把增加的值在复组件中显示,类似一两个页面中的数据绑定
javascript 复制代码
/**
   * 组件的方法列表
   */
methods: {
  addnumber(){
    this.setData({
      count:this.properties.count+=1
    })
    // 触发自定义事件实现把传过来的值将数同步个父组件
    this.triggerEvent('sync',{value:this.properties.count})
  }
}
  1. 在父组件的js中,通过e.detail获取到子组件传递过来的数据
javascript 复制代码
 //在父组件中定义 syncount方法
  // 将来,这个会被传递给子组件,供子组件调用
  syncCount(e){
    console.log("syncount");
    console.log(e.detail.value);
    this.setData({
      count:e.detail.value
    })
  },

获取组件实例方式进行父子组件通信

可以在父组件里调用this.selectComponent("id或class选择器"),获取子组件的对象,从而直接访问子组件的任意方法。调用时需要传递一个选择器,例如this.selectComponent(".my-component").

html 复制代码
//wxml结构
<view>
  我是父组件中的值:{{count}}
  <mytest1 count="{{count}}" bind:sync="syncCount"
    class="childName1"
    id="childName1">
    <view slot="slot1">我是插槽1的内容 </view>
    <view slot="slot2">我是插槽2的内容 </view>
  </mytest1>
</view>
<button bind:tap="getChild">获取子组件的实例对象</button>
javascript 复制代码
//定义事件处理函数
getChild(){
  const child = this.selectComponent('.childName1')
  console.log(child);
},

这时候点击按钮可以看到获取到了子组件的很多信息

我们可以设定点击按钮给子组件count传值让它自增加2

javascript 复制代码
getChild(){
  const child = this.selectComponent('.childName1')
  console.log(child);
  child.setData({
    count: child.properties.count+2
  })
},

不仅如此,我们还可以调用子组件中已经定义的方法,在打印出的内容中可以看到

在原型中有我们之前定义的addnumber方法,我们可以尝试调用,可以成功调用

javascript 复制代码
  getChild(){
    const child = this.selectComponent('.childName1')
    console.log(child);
    child.addnumber()
  },
相关推荐
丁总学Java4 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域6 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8686 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165026 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦13 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac16 小时前
微信小程序的组件
微信小程序
stormjun18 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck18 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23420 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong20 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序