uniapp 广播数据
使用全局事件总线进行广播
在uniapp中，可以通过全局事件总线实现组件间的数据广播。创建一个Vue实例作为事件中心，用于触发和监听事件。
// 在main.js中创建事件总线
Vue.prototype.$EventBus = new Vue()
// 发送广播的组件
this.$EventBus.$emit('eventName', data)
// 接收广播的组件
this.$EventBus.$on('eventName', (data) => {
console.log('接收到的数据:', data)
})使用uni.$emit和uni.$on方法
uniapp提供了内置的全局事件方法，可以在任意页面间进行通信。
// 发送广播的页面
uni.$emit('updateData', {msg: '数据更新'})
// 接收广播的页面
uni.$on('updateData', (data) => {
console.log('收到数据:', data)
})通过Vuex状态管理共享数据
对于需要全局共享的数据，可以使用Vuex进行状态管理。
// store/index.js中定义状态和mutations
export default new Vuex.Store({
state: {
sharedData: null
},
mutations: {
setSharedData(state, payload) {
state.sharedData = payload
}
}
})
// 组件中提交mutation
this.$store.commit('setSharedData', {key: 'value'})
// 其他组件获取数据
computed: {
sharedData() {
return this.$store.state.sharedData
}
}使用uni.setStorageSync和uni.onStorageChange
通过本地存储配合存储变化监听实现数据广播。
// 设置存储触发广播
uni.setStorageSync('broadcastData', {info: '新数据'})
// 监听存储变化
uni.onStorageChange((res) => {
console.log('存储变化:', res)
})注意事项
全局事件需要手动移除监听，避免内存泄漏。在页面卸载时应该调用uni.$off方法。
onUnload() {
uni.$off('updateData')
}Vuex适合管理需要持久化的共享状态，而事件总线更适合一次性或临时的数据通信。根据实际场景选择合适的方法，对于简单的数据广播，uni.$emit和uni.$on是最便捷的选择。
