小程序组件通讯

组件通讯

属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据

事件绑定

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

获取组件实例

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

属性绑定

属性绑定只能传递普通类型的数据，无法将方法传递给子组件

// 父组件的data节点
data: {
	count: 0
}

// 父组件的wxml结构
<my-test3 count="{{ count }}"></my-test3>
<view>~~~~~</view>
<view>父组件中,count的值为 :{{ count }}</view>

事件绑定

是将绑定用于实现子向父传值，可以传递任何类型的数据

在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

在父组件的wxml中，通过自定义事件的形式，将定义的函数引用，传递给子组件

在子组件的 js 中，通过调用this.triggerEvent(‘自定义事件名称’,{/* 参数对象*/})，将数据发送到父组件

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

<!-- 事件绑定 -->
<!-- 使用bind:自定义事件名称 -->
<my-test3 count="{{ count }}" bind:sync="syncCount"></my-test3>
<!-- 或在bind后面直接写上自定义事件名称 -->
<my-test3 count="{{ count }}" bindsync="syncCount"></my-test3>

syncCount(e){
	this.setData({
		count: e.detail.value // 获取子组件传递过来的数据
	})
}

组件实例

在父组件中调用this.selectComponent("id或class选择器")，获取子组件的实例对象

从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器（子组件上的类名或id）

// wxml
<my-test3 count="{{ count }}" bind:sync="syncCount" class="customA" id="cA" />
<button bindtap="getChild">获取子组件实例</button>

getChild(){ 										// 按钮的 tap 事件处理函数
	// 参数不能传递标签选择器 'my-test3', 不然返回的时null
	const child = this.selectComponent(".customA")	// 也可以传递id选择器 #cA
	child.setData({ ... })							// 调用子组件的 setData 方法
	child.addCount()								// 调用子组件的 addCount 方法
}