Vue2.0 Vue脚手架 全局实现总线2保证这个X能调用的到$on(绑定事件)和$off(解绑事件)还有一个就是$emit

结合之前的事件总线

Vue.protorype.x = {a:100,b:200}

这个x只是普通的对象里面没有$on和其他的，所以会报错

那么我们要整明白$on、$off、$emit都在哪?

mounted() {
	console.log('School',this.$on)
},

看看this(VueComponent实例对象),为什么能调用

因为$on、$off、$emit都在Vue原型对象上

验证:

main.js

console.log(Vue.prototype)

那把x的值设置成什么值它才能去找到Vue的原型对象，俩种写法:

• Vue原型对象上的属性和方法都是给vm或者是给VueComponent实例对象用的

  先是写一些

  //创建一个组件
  //这里的demo其实是VueComponent
  const Demo = Vue.extend({})
  //之前是定义完组件后<demo />才能出现实例对象
  //这里不行，所以我们直接在这new一个
  const d = new Demo()//这个d是VueComponent的实例对象
  Vue.prototype.x = d
  

  在School.vue中写$on、$off、$emit了

  School.vue

  mounted() {
  	console.log('School',this)
  	this.x.$on('hello',(data)=>{
  		console.log('这里是School组件,收到了数据',data)
  	})
  },
  

  在Student.vue里面写一按钮实现同等级组件间通信，把学生名交给School.vue组件

  Student.vue

  <template>
      <div>
          <h2>学生姓名:{{name}}</h2>
          <h2>学生性别:{{sex}}</h2>
          <button @click="sendStudentName">把学生名给School组件</button>
      </div>
  </template>
  
  <script>
      export default{
          name: 'Student',
          components:{},
          data() {
              return {
                  name: '张三',
                  sex: '男'
              }
          },
          methods: {
              sendStudentName(){
                  this.x.$emit('hello',666)//$emit触发hello事件,先传个666
              }
          },
      }
  </script>
  

  这里是School组件,收到了数据 666
  

简化一下main.js里的x傀儡的代码

这个$on、$off、$emit不仅VueComponent实例对象能调用的到，vm也可以

但是:

Vue.prototype.x = vm

const vm = new Vue({
    render: h => h(App)
}).$mount("#app")

和

const vm = new Vue({
    render: h => h(App)
}).$mount("#app")

Vue.prototype.x = vm

都不对，这时就要用到一个生命周期钩子beforeCreate()那里面的this是谁?Vue实例对象

在这里模板解析了吗?没有,甚至数据监测和数据代理都没有完成

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    beforeCreate() {
        Vue.prototype.x = this//安装全局事件总线
    },
    render: h => h(App)
    
}).$mount("#app")

我们一般把x定义成$bus:总线、公共汽车，为什么加$是为例迎合Vue的设计

为了避免名字上的冲突你可以src >创建config之类的>比如contans.js

还有一个可以解决名字冲突的问题：

你是在School.vue组件里面用这个傀儡($bus)绑定的hello事件,为什么绑定这个事件？因为你想借用这个傀儡得到数据，希望各位在这个组件销毁之前最好把这个傀儡身上的这个hello事件给它解绑。

所以我们一般会做这件事:

beforeDestroy() {
	this.$bus.$off('hello')
 },                              

Studnt.vue一旦没有了，整个VueComponent就没有了，但是傀儡不一样，School组件也许某一天没了，但是傀儡($bus)一直在，所以该用的时候用，但是用完了一定要把傀儡上的那个事件给它解绑

但是傀儡($bus)一直在，所以该用的时候用，但是用完了一定要把傀儡上的那个事件给它解绑

这就是全局事件总线。控制住$bus想怎么传数据就怎么传数据

总结

全局事件总线(GlobalEventBus)

1.一种组件间通讯的方式，适用于任意组件间通讯

2.安装全局事件总线:

new Vue({
    ...
    beforCreate(){
    	Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	}
})

3.使用事件总线:

(1).接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods:{
    demo(data){...}
}
......
mounted(){
    this.$bus.$on('xxx',this.demo)
}

(2).提供数据:this.$bus.$emit('xxx',数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件