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);
}
});
}
};
更多推荐


所有评论(0)