实现小程序的父子通信

微信小程序的父子通信怎么实现

---

---

前言

---

一、微信小程序父子通信怎么实现？

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

二、具体步骤

1.父子通信

• 父模板中

<!-- 父子通信 -->
// 父模板中的子组件
<mycomp2 count="{{count}}">
</mycomp2>

<view>
 父组件中的count值为{{count}}
</view>

• 父的js中

data: {
    count:0

  },

• 子组件中

// js中
 properties: {
    count:Number
  },

// wxml中
<view>
  <text>子组件中,count的值为:{{count}}</text>
</view>

2.子父通信

• 父模板中

<!-- 父子通信 -->
<mycomp2 count="{{count}}" bind:update="updateCount">
</mycomp2>

<view>
 父组件中的count值为{{count}}
</view>

• 父的js中

  updateCount(e){
    // 打印传过来的事件对象
    // console.log(e);
    this.setData({
      // 让count值等于传过来的值
      count:e.detail.value
    })
  },

• 子组件中

<button bindtap="addCount">+1</button>
<view>
  <text>子组件中,count的值为:{{count}}</text>
</view>

• 子组件的js中

methods: {
    addCount(){
      // 这里是改变子组件中的数据
      this.setData({
        count:this.data.count+1
      })
      // 触发并更新父组件中的count
      // 自定义事件名,传参
      this.triggerEvent("update",{value:this.properties.count})
    }
  }

3.获取组件实例

• 父模板中

<!-- 父子通信 -->
<mycomp2 count="{{count}}" bind:update="updateCount" class="current" id="CURRENT">
</mycomp2>

<view>
 父组件中的count值为{{count}}
</view>
<!-- 获取组件的实例 -->
<button bindtap="getCount">getCount</button>

• 父js中

// 获取子组件的实例对象，从而直 接访问子组件的任意数据和方法
  getCount(){
    // 获取子组件通过类名或者id,不能通过标签
    const child =this.selectComponent('.current')
    // const child =this.selectComponent('#CURRENT')
    child.setData({
      count:this.data.count+1
    })
    // 直接调用子组件中的方法
    child.addCount()
  },

总结

本文仅仅简单介绍了微信小程序父子通信的使用