三种方式
1. 属性绑定
用于父组件向子组件指定属性设置数据,无法将方法传递给子组件
实例:
父组件:
js中声明一个变量count
data: {
count:1
},
wxml
渲染父组件count
<view> 父组件count:{{count}}</view>
在父组件引用子组件,并进行属性绑定,把父组件count值传给子组件
<my-banner count="{{count}}"></my-banner>
子组件
在子组件的js中接收
properties: {
count:Number
},
子组件wxml中进行渲染
<view>子组件count:{{count}}</view>
结果:
2. 事件绑定
用于子组件向父组件传递数据,可以传递任意数据
子组件
触发加1按钮之后传递给父组件
methods: {
addCount(){
this.setData({
count:this.properties.count+1
})
//触发自定义事件
this.triggerEvent('sync',{value:this.properties.count})
}
}
父组件:
js
创建事件
syncCount(e){
this.setData({
count:e.detail.value
})
},
wxml
绑定自定义事件
<my-banner count="{{count}}" bind:sync="syncCount"></my-banner>
3. 获取组件实例
父组件通过this.selectComponent()获取子组件实例对象,可以访问子组件任意数据和方法
父组件进行调用时需要传入一个id或者class选择器
父组件
wxml
<my-banner count="{{count}}" bind:sync="syncCount" class="childContent"></my-banner>
<view> 父组件count:{{count}}</view>
<button bindtap="getChild">获取子组件实例对象</button>
js
getChild(){
const child=this.selectComponent('.childContent')
child.setData({
count:child.properties.count+1
})
},
拿到子组件实例对象,直接为子组件进行赋值
修改父组件count值
getChild(){
const child=this.selectComponent('.childContent')
child.setData({
count:child.properties.count+1
})
this.setData({
count:child.properties.count
})
// child.addCount()//可以调用子组件方法
},