全局事件总线

image

  1. 初步想法，维系一个全局可以获得的变量，可以直接在main.js中定义一个window.x={name:hzt}，然后全局都可以通过window.x获得该元素。
  2. 进一步思考，让所有的vc可以访问到该元素，可以在VueComponent.prototype上放属性。但是VueComponent必须为Vue.extend调用生成，而且他一定是新生成的VueComponent。或者直接进入源码修改
    image

一个很重要的内置关系

VueComponent.prototype._proto_ === Vue.prototype
3. 因此可以在Vue.prototype中引入全局事件总线。
4. 这里任然没有解决问题，因为只有一个vc或者vm实例对象才可以使用$on,$emit，因此要加一个vc，或者vm，或者直接绑定最大的父亲vm.prototype.$bus

last(最终写法）

在main.js中

1
2
3
4
5
6
7
8
//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this //安装全局事件总线
  },
})

然后vm中的x即可作为一个全局变量来使用了
因为每个自定义事件只能绑定一个方法，因此为了避免一直占用着一个事件。要求在组件销毁前先解绑

1
2
3
beforeDestroy(){
  this.$bus.$off('hello')
}