Vue3中兄弟组件可以使用emit吗 ?请给出示例
时间: 2024-09-30 13:09:23 浏览: 29
vuejs使用$emit和$on进行组件之间的传值的示例
5星 · 资源好评率100%
在Vue3中,兄弟组件之间的通信通常不直接通过`emit`和`on`事件监听器来实现,因为它们属于单向数据流设计的一部分,主要用于父子组件间的通信。然而,你可以借助其他方式,如Vuex store、自定义事件总线或者使用Vue的`ref`和`$emit`配合来间接实现兄弟组件间的信息传递。
例如,你可以创建一个全局的事件总线或者一个公共服务,让兄弟组件订阅和发布事件:
```javascript
// 全局事件总线(Event Bus)
import bus from '@/common/bus.js'; // 假设有一个bus.js文件
// 子组件A
export default {
methods: {
sendToBrother() {
bus.$emit('messageFromA', { data: 'Hello Brother' });
}
}
}
// 兄弟组件B(需要监听messageFromA事件)
export default {
created() {
bus.$on('messageFromA', (data) => {
console.log('Received message:', data);
});
},
beforeDestroy() {
bus.$off('messageFromA');
}
}
```
阅读全文