在Uniapp开发中，组件通信是常见的需求。当两个组件不是父子关系而是兄弟关系时，如何实现它们之间的通信呢？本教程将介绍几种常用的兄弟组件通信方法。
一、通过父组件中转实现通信
这是最基础的兄弟组件通信方式，原理是通过共同的父级作为"桥梁"。
javascript
// 父组件
<script>
export default {
data() {
return {
message: '初始消息'
}
},
methods: {
handleChangeMsg(newMsg) {
this.message = newMsg
}
}
}
</script>
// ChildA.vue
<script>
export default {
props: ['msg'],
methods: {
changeMessage() {
this.$emit('changeMsg', '新消息')
}
}
}
</script>
// ChildB.vue
{{ msg }}
<script>
export default {
props: ['msg']
}
</script>
二、使用Vuex状态管理
对于复杂的应用，推荐使用Vuex进行状态管理。
1. 安装并配置Vuex
javascript
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: { sharedData: '' },
mutations: { updateData(state, payload) { state.sharedData = payload } },
actions: { setData({ commit }, data) { commit('updateData', data) } }
})
export default store
// main.js中挂载store...
2. 在兄弟组件中使用
javascript
// ComponentA.vue -发送数据方-
methods:{
sendToSibling(){
this.$store.dispatch('setData','来自A的数据')
}
}
// ComponentB.vue -接收数据方-
computed:{
receivedData(){
return this.$store.state.sharedData
}
三、使用事件总线(Event Bus)
适合中小型项目或简单场景的轻量级解决方案。
1. 创建事件总线
javascript
// utils/eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
2. 发送事件
javascript
import { EventBus } from '@/utils/eventBus.js'
methods:{
sendMessage(){
EventBus.$emit('custom-event','传递的数据')
}
}
3. 接收事件
javascript
import { EventBus } from '@/utils/eventBus.js'
created(){
EventBus.$on('custom-event',data=>{
console.log('收到数据:',data)
})
},
beforeDestroy(){ //记得移除监听防止内存泄漏！
EventBus.$off('custom-event')
}
四、uni-app特有的$emit和$on方法
Uniapp扩展了全局的事件机制：
javascript
// ComponentA触发全局自定义事件
uni.$emit('update',{ msg:'Hello' })
// ComponentB监听全局自定义事件
uni.$on('update',function(data){ console.log(data) })
//移除监听用uni.$off()
注意：这种方式也需要在适当时候移除监听器。
五、本地存储方案
对于需要持久化的数据可以使用：
- `uni.setStorageSync` / `uni.getStorageSync`
- `localStorage` API（H5端）
但这种方法响应性较差，通常不推荐用于实时通讯场景。
---
⭐️最佳实践建议⭐️
1. *简单场景* →选择父子中转或Event Bus
2. *复杂应用* →务必采用Vux/Pinia
3. *跨页面通讯* →考虑使用全局事件(uni.\$emit)
4. *非敏感临时数据* →可尝试本地存储方案
无论哪种方式，都要注意及时清理无用的事件监听以防止内存泄漏！
希望本教程能帮助你解决Uniapp中的兄弟组件通讯问题。根据你的项目规模选择合适的方案吧！
文章点评