微信小程序 组件间通信与事件

在微信小程序中，此处介绍组件建通信有三种方式：

1、父组件向子组件传值，通过父组件给子组件指定的属性设置值来实现

在子组件wxml中

<text>子组件中count的值：{
   
   {num}}</text>

num是对应.js文件中的属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num:Number
  }

• 在父组件wxml中

<my-test6 num="{
   
   {s}}"></my-test6>

<View>~~~~~~~~~~~~~~</View>

<view>父组件count值为：{
   
   {s}}</view>

对应的.js文件中定义数据s

  data: {
    s:1
  }

这样就可以将父组件中s的值1传递给子组件属性num中

• 运行效果

2、子组件向父组件传值，通过事件来实现

分为四个步骤：

• 在父组件的js文件中，定义一个函数，这个函数通过自定义事件的方式传递给子组件
• 在父组件的wxml文件中，通过自定义事件的方式，将上步中定义的函数引用传递给子组件
• 在子组件的js中，通过调用this.triggerEvent(‘自定义事件的名称’),将数据发送到父组件
• 在父组件的js中，通过e.detail获取子组件传递的数据

针对上面的步骤写出今天的代码

第一步：在父组件的js文件中，定义一个函数

syncCount(e){
    
  }

第二步：在父组件的wxml文件中，将函数引用传递给子组件，使用bind：

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount"></my-test6>

第三步：在子组件的js中，通过调用this.triggerEvent(‘自定义事件的名称’),将数据发送到父组件

 addCount(){
      this.setData({
        num:this.properties.num + 1
      })
      this.triggerEvent('sync',{value:this.properties.num})
    }

第四步：在父组件的js中，通过e.detail获取子组件传递的数据

syncCount(e){
    this.setData({
      s:e.detail.value
    })
  }

实现效果：

组件通信

3、父组件通过获取子组件的实例来传值

在父组件中通过this.selectComponent来获取子组件的实例，子组件选择器只能使用class或者id

父组件的wxml文件，将子组件的class选择器声明为test6：

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount" class="test6"></my-test6>

父组件对应的js文件，获取到子组件实例后可以调用子组件的方法

getChild(){
    const child = this.selectComponent('.test6')
    console.log(child)
    child.addCount()
  }