微信小程序_18,父子组件之间的通信

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

1.属性绑定: *用于父组件向子组件指定属性设置数据，仅能设置json兼容的数据

2.事件绑定:

• 用于子组件向父组件传递数据,可以传递任意数据

3.获取组件实例:

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

---

属性绑定

属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件,父组件的示例代码如下:

父组件WXML中

<myTest1 count="{{count}}">
</myTest1>

父组件的js中:

Page({
  data: {
    count: 0
  }
})

子组件的WXML:

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

子组件的js:

// components/myTest1/myTest1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: Number
  }
})

run,这里圈出来的才是:

那么此时我们在子组件中,添加一个button,点击button,子组件中的count自增+1: 子组件的wxml:

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

子组件的.js:

// components/myTest1/myTest1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: Number
  },
    methods: {
	  addCount() {
   		 this.setData({
         count: this.properties.count + 1
           })
        },
     }
})

这里点button,但是组件中的count并不会自加,因为界面上展示的count是来自父组件的值,这里就需要用到子组件向父组件传值,事件绑定

事件绑定:

事件绑定用于实现子向传值,可以传递任何类型的数据,使用步骤如下:

1.在父组件的js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 2.在父组件的WXML中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件 3.在子组件的js中,通过调用this.triggerEvent('自定义事件',{/*参数对象*/}),将数据发送到父组件 4.在父组件的js中,通过e.datail获取到子组件传递过来的数据

1.在父组件中写自定义函数:

Page({
  syncCount(){
    console.log('syncCount');
  }
})

2.父组件中wxml通过自定义事件,将步骤1中定义的函数引用,传递给子组件:

<!-- 使用bind：自定义事件名称(推荐,结构清晰) -->
<myTest1 count="{{count}}" bind:sync="syncCount">
</myTest1>
<!-- 或在bind后面直接写上自定义事件名称 -->
<myTest1 count="{{count}}" bindsync="syncCount">
</myTest1>

3.在子组件的js中,通过调用this.triggerEvent('自定义事件',{/*参数对象*/}),将数据发送到父组件 子组件的wxml代码:

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

子组件的js:

// components/myTest1/myTest1.js
Component({
  methods: {
    addCount() {
      this.setData({
        count: this.properties.count + 1
      })
      this.triggerEvent('sync', {
        value: this.properties.count
      })
    },
  }
})

4.在父组件的js中,通过e.detail获取到子组件传递过来的数据: 父组件的js:

Page({
  syncCount(e) {
    console.log('syncCount');
    this.setData({
      count: e.detail.value
    })
  },
})

run:

---

或者也可以通过下面的方法:

获取组件实例:

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

父组件的WXML:

<myTest2 class="myTest2" count="{{count}}" bind:sync="syncCount">
</myTest2>

<button bindtap="addCountMysTest2" type="primary">
  +1
</button>

父组件js:

// pages/person/person.js
Page({
  addCountMysTest2() {
    // 切记下面传入的是标签选择器，否则返回的是null
    const child = this.selectComponent('.myTest2')
    // 调用子组件的setData方法
    child.setData({
      count: child.properties.count + 1
    })
    // 调用子组件的addCount方法
    // child.addCount()
  },
})

子组件wxml:

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

子组件的js:

// components/myTest2/myTest2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: Number
  },
  /**
   * 组件的方法列表
   */
  methods: {
    addCount() {
      this.setData({
        count: this.properties.count + 1
      })
      this.triggerEvent('sync', {
        value: this.properties.count
      })
    },
  }
})