uniapp广播
使用全局事件总线实现广播
在uni-app中，可以通过Vue的EventBus实现组件间通信。创建一个单独的eventBus.js文件导出Vue实例：
// eventBus.js
import Vue from 'vue'
export default new Vue()发送广播：
import eventBus from './eventBus.js'
eventBus.$emit('eventName', data)接收广播：
import eventBus from './eventBus.js'
eventBus.$on('eventName', (data) => {
console.log('接收数据:', data)
})销毁监听：
eventBus.$off('eventName')通过uni.$on和uni.$emit实现跨页面通信
uni-app内置了全局事件方法，适用于页面间通信：
发送事件：
uni.$emit('updateCart', { goodsId: 123 })监听事件：
uni.$on('updateCart', (data) => {
console.log('购物车更新:', data)
})移除监听：
uni.$off('updateCart')注意：监听需在页面卸载时手动移除。
使用Vuex进行状态管理广播
对于复杂状态共享，可通过Vuex的mutations或actions触发全局状态变更：
// store.js
const store = new Vuex.Store({
state: { message: '' },
mutations: {
setMessage(state, payload) {
state.message = payload
}
}
})组件中触发：
this.$store.commit('setMessage', '新消息')组件中监听：
通过计算属性实时获取状态变化：
computed: {
message() {
return this.$store.state.message
}
}注意事项
- 事件命名避免冲突，建议使用模块前缀（如
user/login）。 - 页面销毁时需清理事件监听，防止内存泄漏。
- 高频事件考虑使用防抖或节流优化性能。
适用场景对比
- EventBus/Vue全局事件：适合简单组件通信。
- uni.$emit/uni.$on：适合跨页面非持久化通信。
- Vuex：适合需要持久化或复杂状态管理的场景。
