uniapp组件通讯

1、父组件跳转页面时通过eventChannel设置监听事件：

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({url: '/pages/test?id=1',events: {// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据acceptDataFromOpenedPage: function(data) {console.log(data)},someEvent: function(data) {console.log(data)}...},success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })}
})

2、子组件接收父组件路径参数和eventChannel函数并且调用父组件事件传递数据：

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {const eventChannel = this.getOpenerEventChannel();eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('acceptDataFromOpenerPage', function(data) {console.log(data)})
}

3、调用父组件函数需要把当前页面函数映射到监听事件中：

// 当前页面的Vue实例
export default {data() {return {message: ''};},methods: {// 接收从被打开页面发送的数据acceptDataFromOpenedPage(data) {console.log('Received data:', data);this.message = data; // 假设我们想要更新当前页面的数据}},// 导航到新页面，并设置事件监听器navigateToPage() {uni.navigateTo({url: '/pages/test?id=1',events: {// 使用当前页面的实例方法作为监听器acceptDataFromOpenedPage: this.acceptDataFromOpenedPage},success: function(res) {console.log('navigateTo success', res);},fail: function(err) {console.error('navigateTo fail', err);}});}
};