Vue 事件总线的使用

以你之姓@ 2023-09-29 04:28 20阅读 0赞

### Vue 事件总线的使用 ###

*  一、Vue2.0 版本
 *  二、Vue3.0版本
 *  三、事件总线的使用
 *  四、总结

**前言**

> 在vue中使用事件总线可以省去很多组件间通信的麻烦，例如可能会出现的子传父，父再传子的多个传递过程。事件总线使用`emit`进行广播，然后某个组件进行监听，就达到通信的目的了

# 一、Vue2.0 版本 #

//main.js中
    const app = createApp({
        })//正常的创建Vue实例
    app.config.grobalProperties.$bus = createApp({
        })//创建事件总线

# 二、Vue3.0版本 #

**首先安装第三方库mitt**

> npm install --save mitt

然后全局使用事件总线：

//main.js中
    import {
        createApp} from "vue"
    import App from './App.vue'
    import mitt from "mitt"
    
    const app = createApp(App);//正常配置
    //挂载事务总线
    app.config.globalProperties.$bus = new mitt()

# 三、事件总线的使用 #

**在组件A中使用事务总线触发某个动作**

this.$bus.emit('event',{
        data:'123'})

**在组件B中监听动作的发生**

> 在mounted中监听

mounted(){
        
    	this.$bus.on("event",(msg)=>{
        
       		 console.log(msg.data);
        });
    }

> 也可以在data()中监听

data(){
        
    	this.$bus.on("event",(msg)=>{
        
       		 console.log(msg.data);
        });
        return{
        
        }
    }

# 四、总结 #

> 问题：当Vue升级到3.0版本后，其创建方法改成了createApp(\{\})，prototype属性也被取消了，因此无法使用之前Vue.prototype.$bus> = new Vue()的方式使用事务总线

解决方法：

> Vue3.0版本中把$on、$off、$once等事件函数都去除掉了，只留下了$emit() 用于父子组件之间的沟通。

**为了能够使用事务总线，除了$emit触发事件之外，还至少应该有$on监听函数。`官方推荐使用第三方库mitt`。**

> 需要注意的是，这里的事务总线$bus的函数emit和on是来源于mitt,而不是vue,不需要使用$符号。

--------------------

**参考：**  
https://blog.csdn.net/xaishujin/article/details/109167375

Vue 事件总线的使用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue 事件总线的使用

相关 Vue键盘事件的使用

相关 Vue事件处理的基本使用

相关 Vue事件修饰符的使用

相关 SMBus总线与I2C总线的区别

相关总线的性能指标

相关 Vue事件修饰符的使用

相关记一笔vue中的中央事件总线的问题，以及解决方案

相关 Vue-事件修饰符的使用详解

相关 Vue.js--非父子组件通信（中央事件总线、父链、子组件索引）详解