《十三》微信小程序中组件间通信

组件间的基本通信方式有以下几种：

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

父组件通过 properties 属性给子组件传递数据：

// 父组件 index.wxml

1
2

// 子组件 searchInput.wxml


// 子组件 searchInput.js
Component({
 	properties: {
	    placeholderText:{
	      // 支持 String、Numer、Boolean、Object、Array、null（表示不限制类型） 类型
	      type: String,
	      value: '请输入'
	    }
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

子组件通过自定义事件给父组件传递数据：

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

// 子组件 searchInput.wxml


// 子组件 searchInput.js
Component({
 	methods: {
	    handleSearch(){
	      // 自定义组件触发事件时，需要使用 triggerEvent 方法指定事件名、detail 对象和事件选项。
	      this.triggerEvent('confirmSearch', {value: '我是输入的值'}, {});
	    }
   }
})
1
2
3
4
5
6
7
8
9
10
11
12

// 引用自定义组件的页面 index.wxml
// 可以在引用自定义组件的页面通过 bind 监听子组件触发的事件


// 父组件 index.js
Page({
	handleSearch(e){
		const value = e.detail.value;
	}
})
1
2
3
4
5
6
7
8
9
10

triggerEvent()：

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail 对象和触发事件的选项。

触发事件的选项包括：

1. bubbles：事件是否冒泡。
2. composed：事件是否可以穿越组件边界。属性值为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部。
3. capturePhase：事件是否拥有捕获阶段。

<-- custom-li.wxml -->

  我是自定义的 li


// custom-li.js
Component({
  relations: {
    '../custom-ul/custom-ul': {
      type: 'parent',
    }
  },
  methods: {
    liEventListener: function(){
      this.triggerEvent('click', {}) // 触发 liPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true }) // 依次触发 liPageEventListener、ulPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次触发 liPageEventListener、// 依次触发 liPageEventListener、ulPageEventListener、ulPageEventListener
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  我是自定义的 ul
  

1
2
3
4
5

	
  		
	

1
2
3
4
5
6

父组件通过获取子组件实例来调用子组件的数据和方法：

可以在父组件里调用 this.selectComponent() 来获取子组件的实例对象，调用时需要传入一个匹配选择器 selector。

// 父组件index.wxml


//父组件 index.js
Page({
  handleChangeTabs () {
    const searchImput = this.selectComponent('.home-search');
  }
})
1
2
3
4
5
6
7
8
9

默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例，将返回 null。如果想让一个组件在上述条件下依然能被 selectComponent 返回，可使用内置 behavior: wx://component-export 自定义其返回结果。使用该 behavior 时，自定义组件中的 export 定义段将用于指定组件被 selectComponent 调用时的返回值。

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})
1
2
3
4
5
6
7

// 父组件调用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }
1
2
3
4
5