微信小程序 - 父子组件通信

Se1fAware
1,494 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

引子

本文主要讲述微信小程序中父子组件之间的三种通信方式的概念与实现，搭配图文进行解析；

本文预计阅读时长 10min；

 

父子组件之间通信的 3 种方式

  1. 属性绑定

    用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据(只能传递数据，不能传递方法)

  2. 事件绑定

    用于子组件向父组件传递数据，可以传递任意数据(包括数据和方法)

  3. 获取组件实例

    父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件

实现： 通过父组件向子组件传递数据，子组件通过 properties 接收

代码示例

父组件
 // .js - 定义要传递的值
 data: {
   count: 0
 }
   
 // .wxml - 将名为count的值传递給子组件test
 <test count="{{count}}"></test>
子组件
 // 通过 properties 接收父组件传递过来的 count
 properties: {
   count: Number
 },

图文示例

image-20220602165229431

事件绑定

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

实现：

  1. 在子组件的 js 中，在特定的时机通过调用 this.triggerEvent ('自定义事件名称', { 参数对象 })产生一个自定义事件，并且可以带上事件参数对象
  2. 在父组件的 wxml 中的子组件标签中，使用 bind :自定义事件名称="事件处理函数" 来监听自定义事件
  3. 在父组件的 js 中，定义一个接收传递自定义事件的函数，并通过 e.detail 获取到子组件传递过来的数据

代码示例

我们根据事件绑定的实现流程来演示：

  1. 子组件 - 在特定的时机通过调用 this.triggerEvent 产生一个自定义事件
     // .wxml - 绑定点击事件，每次点击时触发子组件向传递父组件的方法
 <button bindtap="sonCount">点我传递</button>
 ​
 // .js - 定义触发的方法
 data: { count: 11 }
 methods: {
   sonCount(){
       // 使用 triggerEvent 来通过定义事件 sync 传递属性值 value 
       this.triggerEvent('sync', {value: this.data.count} )
     }
 },

  2. 父组件 - 使用 bind :自定义事件名称=“事件处理函数” 监听自定义事件

     <test bind:sync="syncCount"></test>

  3. 父组件 - 定义一个接收传递自定义事件的函数，并通过 e.detail 获取到子组件传递过来的数据

       syncCount(e) {
     console.log('执行 syncCount', e)
       
     // 通过 e.detail.value 获取获取子组件传递过来的数据 value
      console.log(e.detail.value) // 11
   },

图文示例

image-20220603214345582

获取组件实例

通过在子组件标签上定义id或class选择器，并在父组件里调用 this.selectComponent("标签选择器") 来获取子组件的实例对象，从而直接访问子组件的任意数据和方法

实现：定义标签选择器并通过 this.selectComponent("标签选择器") 来获取子组件实例对象

代码示例

父组件 - .wxml 定义子组件的class选择器或id选择器

 <test class="sonBox" id="sonBoxID"></test>
 <button bindtap="getChild">+1</button>

父组件 - .js

   getChild(){
     // 通过 selectComponent('.sonBox') 获取class为sonBox的实例对象
     const child = this.selectComponent('.sonBox');
     
     // --- 获取到子组件的实例对象，就可以对子组件的属性方法进行操作啦 
     
 ​
     child.addCount();
     console.log(child); // 查看子组件实例对象
     console.log(child.data.count); // 查看 count 属性
     child.addCount(); // 调用子组件上的方法
   }

打印如下：

image-20220602162544401

图文示例

image-20220602162957635

总结

简单捋一下三种通信实现：

  • 父传子：父组件在子组件标签上使用 属性="值" 来向子组件传递属性值
  • 子传父：子组件通过this.triggerEvent ('自定义事件名称', { 参数对象 })发送传递，而父组件通过bind :自定义事件名称="事件处理函数"来接收数据
  • 父子通信：通过在子组件标签上定义id或class选择器，并在父组件里调用 this.selectComponent("标签选择器") 来获取子组件的实例对象

虽然有时候用全局共享或behavior会比较方便，但是对于小需求且只需要父子类之间传递时，还是建议根据日常需求来配置适合使用通信方式

最后如果本文对于本文有疑惑，还请指导勘正 (●'◡'●)

avatar
文章
阅读
粉丝