vue 子组件相互传值,兄弟之间传值,全局事件总线

在main.js中,通过在beforeCreate钩子中设置Vue.prototype.$bus=this,创建了一个全局事件总线。在子组件a.vue中,可以通过$bus触发事件并传递参数,而b.vue可以在mounted阶段监听该事件并接收数据。在组件销毁前,需调用$off解除监听,避免内存泄漏。

在main.js中,new VUE里beforeCreate()函数中写Vue.prototype.$bus = this; 如下

new Vue({

el: '#app',

router,

template: '<App/>',

components: { App },

beforeCreate(){

// 一定要写这里,不然vue加载完事,会把所有的子组件加载完成,这样就会报错,在

// Create()前就要添加,这样就不会报错

// $bus也可以写成别的,但是官方介绍写的这个,意为“公用的,公交车”。

Vue.prototype.$bus = this;

},

});

其中一个子页面(a.vue),可能有点击事件给另一个子页面(b.vue)传值

a.vue页面中点击事件方法@click="handleCheckedCitiesChange"

methods: {

handleCheckedCitiesChange(val) {

this.$bus.$emit('tableVals',val) //tableVals 事件名称,可以随便起名字,val参数

}

},

b.vue页面接收参数

mounted() {

this.$bus.$on('tableVals',(data)=>{

console.log(我接收到',data); //tableVals必须与上面事件名称一致,data位参数

})

},

// 用完记得销毁

beforeDestroy(){

this.$bus.$off('tableVals')

}

<think>好的,用户想了解在Vue中如何实现兄弟组件之间方法。我需要先回忆一下Vue3中兄弟组件通信的几种方式。根据之前提供的引用,主要有两种方法:使用Mitt插件或者利用provide和inject的响应式API。另外,还有通过事件总线(Bus)的方式,不过这在Vue3中可能需要自己实现,或者使用第三方库如Mitt。 首先,用户可能已经了解过Vue2中的事件总线,但在Vue3中,官方移除了$on等方法,所以需要替代方案。Mitt是一个轻量的事件总线库,适用于Vue3。步骤包括安装Mitt,创建事件总线实例,然后在兄弟组件中分别使用emit和on来触发和监听事件。需要确保两个组件引用的是同一个事件总线实例,通常会在全局注册。 另一种方法是使用provide和inject配合响应式数据。父组件提供一个响应式的对象,兄弟组件通过inject获取这个对象,并修改其中的数据。这样,当数据变化时,所有注入该数据的组件都会更新。需要注意的是,Vue3的provide/inject默认不是响应式的,所以必须使用ref或reactive来包装数据。 用户可能关心哪种方法更推荐。Mitt适合事件驱动的通信,而provide/inject适合共享状态。如果项目已经使用Pinia或Vuex,可能更推荐状态管理库来处理兄弟组件通信,但用户的问题没有提到这些,所以暂时不引入。 另外,引用中的示例代码显示在子组件中使用$emit,但Vue3中兄弟组件不能直接通过父组件传递事件,需要父组件作为中介,或者使用事件总线。所以需要区分子组件兄弟组件的场景。 需要确保回答结构清晰,分点说明每种方法,并给出示例代码。同时,根据用户提供的引用,正确引用来源,比如Mitt方法引用[^1],事件总线引用[^3],而引用[^2]中的例可能不适用于兄弟组件,因为$emit需要父组件监听,所以可能需要指出那种方式适用于父而非兄弟,避免混淆。 最后,生成相关问题,比如性能比较、其他方法如Vuex,或者具体使用场景,帮助用户深入理解。</think>在 Vue3 中实现兄弟组件通信的常用方法主要有以下两种方式,均支持响应式数据传递: --- ### 一、使用 Mitt 事件总线(推荐) 1. **安装 Mitt 插件** ```bash npm install mitt ``` 2. **创建全局事件总线** ```javascript // src/utils/bus.js import mitt from 'mitt' export default mitt() ``` 3. **组件 A 发送事件** ```vue <script setup> import bus from '@/utils/bus' const sendData = () => { bus.emit('customEvent', { value: '数据内容' }) } </script> ``` 4. **组件 B 接收事件** ```vue <script setup> import bus from '@/utils/bus' import { onMounted } from 'vue' onMounted(() => { bus.on('customEvent', (data) => { console.log('接收数据:', data.value) // 输出:数据内容 }) }) </script> ``` **特点**:解耦组件关系,适合跨层级通信[^1][^3] --- ### 二、使用 provide/inject + 响应式状态 1. **父组件提供共享状态** ```vue <script setup> import { provide, reactive } from 'vue' const sharedState = reactive({ message: '' }) provide('sharedKey', sharedState) </script> <template> <ComponentA /> <ComponentB /> </template> ``` 2. **兄弟组件修改状态** ```vue <!-- ComponentA --> <script setup> import { inject } from 'vue' const state = inject('sharedKey') state.message = '来自A的数据' </script> ``` 3. **兄弟组件读取状态** ```vue <!-- ComponentB --> <script setup> import { inject } from 'vue' const state = inject('sharedKey') console.log(state.message) // 输出:来自A的数据 </script> ``` **特点**:适合需要持久化共享的状态[^1] --- ### 性能对比 | 方法 | 适用场景 | 数据流向 | |-----------|----------------------|------------| | Mitt | 瞬时事件通信(表单提交/通知) | 单向/双向 | | provide | 需要长期维护的共享状态(主题/配置) | 集中式状态管理 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值