前情
最近在做小程序项目，选用是当前比较火的uniapp技术栈，经常会遇到页面间消息传递的需求。
为什么要这么做？
uniapp页面间数据通信方式有很多：通过url传参，状态管理库vuex/pinia，本地存储，事件通道eventChannel，EventBus等，
这次的需求是在A面点击一个按钮跳转到B页面拾取一个数据选项再返回A页面用B页面拾取的数据做接下来逻辑处理，像这种情况用事件通道和EventBus来做是比较好的，EventBus相对使用更简单一些，所以使用EventBus
实现代码
A页面
<template>
<view>
<text>我是A页面</text>
<button @click="gotoPageB">点我去B页面</button>
</view>
</template>
<script>
export default {
mounted() {
this.handleCustomEventBind = this.handleCustomEvent.bind(this);
uni.$on('customEvent', this.handleCustomEventBind);
},
destory() {
uni.$off('customEvent', this.handleCustomEventBind);
},
methods: {
gotoPageB() {
uni.navigateTo({
url: '/pages/pageB/pageB'
});
},
handleCustomEvent(event) {
console.log(event.data); // 输出: Hello from Component B
// 处理事件的业务逻辑
// ...
}
}
};
</script>
B页面
<template>
<view>
<text>我是B页面</text>
<button @tap="triggerEvent">点我</button>
</view>
</template>
<script>
export default {
methods: {
triggerEvent() {
uni.$emit('customEvent', { data: 'Hello from Component B' });
uni.navigateBack();
}
}
};
</script>
注意
因为这种事件监听是全局的，所以在定义事件名的最好是是保证唯一，除非确实有多个地方要用到，而且最好是在页面销毁的时候记得清除不需要的事件监听。
