在微信小程序中,此处介绍组件建通信有三种方式:
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()
}