[JavaScript知识库]bus总线的原理解析

非父子组件间传递数据有很多种方式，本文从官方文档开始解析bus总线的原理

1.关于官方介绍?从 Vue 1.x 迁移 — Vue.js

?在官方文档中对bus总线的介绍是使用，但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值，bus总线应用在简单的项目

1.怎么理解bus总线

bus总线就是一个中间组件,触发事件，触发中间组件，监听中间组件的变化

2.bus组件存在的条件和注册

1.所有组件都可以访问
2.可以使用$emit,$on,$off

?在项目过程中要满足这两点需求

1.所有组件都可访问

在vue的项目中，要所有组件都可以访问，那么一定在vue进行实例化之前就准备好,就是下图红色部分

2.可以使用$emit,$on,$off

有$emit，$on，$off的一定是vue的实例对象vc,或者vueComponent的实例对象vm

挂载到哪都可以访问？必然是原型上

vue.prototype.$bus = vue的实例对象/vueComponent的实例对象

?第一种：

Vue.prototype.$bus = vueComponent的实例对象(所有的vueComponent的实例对象都是（Vue.extentd构造的)

?第二种：

在生命周期创建之前 Vue.prototype.$bus = vue的实例对象

第三种:

利用插件进行挂载

安装 -?npm install vue-bus

注册使用：

import VueBus from 'vue-bus';

Vue.use(VueBus)

3.使用?

触发事件

this.$bus.$emit('事件名', 值)

?监听事件

create() {
  this.$bus.$on('事件名', (值) = > {
  })
}

?销毁事件

this.$bus.$off('事件名')

在理解bus总线的前提，是需要理解，为什么写在vue的原型上就可以访问？可以自行思考一下，涉及了一些vue的原理

码字不易，记得点赞哦！