Vue 自定义事件和全局事件总线

组件的自定义事件　

使用场景

　　A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件

在父组件中：

<HelloWorld @customEvent="test1"/>

　　或

<HelloWorld v-on:customEvent="test1"/>

　　（2）第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('customEvent',this.test1)
}

　　（3）若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。

<HelloWorld @customEvent.once="test1"/>

触发自定义事件

 　　其中数据为事件回调函数的参数，按顺序添加参数即可

this.$emit('customEvent',数据)

解绑自定义事件

this.$off('customEvent')

注意

　　通过 this.$refs.xxx.$on('customEvent', 回调) 绑定自定义事件时，回调函数的this指向问题，最好使用箭头函数或配置在methods中

全局事件总线

安装全局事件总线

　　既然自定义组件可以通过子组件来改变父组件的属性，实现通信，那么是否可以在关系更远的组件间通信呢？

　　答案是可以的，其实也可以想到，直接在最上层组件定义自定义事件不就可以了吗。

　　Vue专门为此提供了一种组件间通信的方式，适用于任意组件间通信。

　　安装全局事件总线：

　　在main.js中，通常在beforeCreate函数中安装全局事件总线

　　最晚在beforeMount中安装，不然会报错，从此也可以看出事件注册是在beforeMount之后开始的

// main.js
new Vue({
   ......
   beforeCreate() {
      Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   },
      ......
}) .$mount('#app')

使用事件总线

　　全局事件总线的使用和自定义事件很像，如下：

　　注册事件：

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

　　触发事件：

this.$bus.$emit('xxxx',数据)

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