一、在父组件中定义方法
二、通过事件绑定的形式将方法传给子组件
三、在子组件中以触发事件的形式，将数据传给父组件
父组件 wxml
<view>父组件的数据{{count}}</view>
<view> ---------- </view>
<!-- 通过自定义事件的形式将自定义方法(sysCount)传给子组件
子组件在完成某些操作之后可以触发这个事件(sync)，从而把数据传给父组件 -->
<tst count="{{count}}" bind:sync="sysCount" class="tst"></tst>
<button bindtap="getChild"> 获取子组件实例 </button>
父组件js
Page({
data: {
count:0
},
sysCount(e)
{
this.setData({count:e.detail.value})
}，
getChild()
{
const child = this.selectComponent('.tst')
//可以设置子组件的数据
child.setData({count:child.properties.count+1})
//可以执行子组件的方法
child.addCount()
}
}
子组件wxml
<view>子组件的数据 {{count}} </view>
<button bindtap="addCount">+1</button>
子组件js
Component({
/**
* 组件的属性列表
*/
properties: {
count:Number
},
/**
* 组件的方法列表
*/
methods: {
addCount(){
this.setData({count:this.data.count + 1})
//触发自定义事件，将数据同步给父组件
this.triggerEvent('sync',{value:this.properties.count})
}
}
})
评论