Vue2和Vue3组件间通信方式汇总（3）------$bus

原创

已于 2023-12-23 22:19:47 修改 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-12-23 12:05:05 首次发布

组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。

Vue2+Vue3组件间通信方式汇总（1）------props

Vue2+Vue3组件间通信方式汇总（2）------$emit

一、全局总线$bus 原型链

归根结底就是在vm，vue原型链上注册一个名叫$bus 的对象，再把this，就是vm实例对象赋给$bus，其中$on $emit $off等就是全局可以读可写的变量,即可实现，相关组件、不相关组件之间数组地传递。

------Vue2

main.js文件中，Vue实例下，往Vue原型链上注册属性：$bus

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bu