微信小程序_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
      })
    },
  }
})