微信小程序---组件通信---通过自定义事件实现子向父传递数据-爱代码爱编程
微信小程序—组件通信—通过自定义事件实现子向父传递数据
子组件component
wxml
<view>{{count}}</view>
<button bindtap="addCount">+1</button>
js
properties: {
count:Number
},
methods: {
addCount(){
this.setData({
count:this.properties.count+1
})
//触发自定义事件sync,将数值同步给父页面
this.triggerEvent('sync',{value:this.properties.count}) //
}
}
父页面page
wxml
//通过自定义事件sync将父页面的syncCount方法传递给子组件
<mytest count="{{count}}" bind:sync="syncCount"></mytest>
<view>{{count}}</view>
js
data: {
count:1
},
syncCount(e){
this.setData({
count:e.detail.value
})
},
实现效果: