使用场景: 1、兄弟组件的通信,父子组件的通信 2、不同路由的通信
针对兄弟组件的通信,父子组件的通信 新建bus.js文件
import Vue from 'vue'
var bus = new Vue()
export default bus
在需要通信的组件中引入bus.js,一个组件触发事件,另一个组件监听事件
import Bus from "@/assets/js/bus.js"
子组件
testClick(){
alert("test")
Bus.$emit("message","hiinew")
},
父组件
mounted(){
var _this = this
Bus.$on("message",function(res){
_this.message = res
})
}
针对不同路由的通信
需要在A组件销毁前触发事件
beforeDestroy () {
Bus.$emit("message","hii")
},
在B组件created中接收事件
created () {
var _this = this
Bus.$on("message",function(res){
console.log(res+"123")
_this.message = res
})
},
并且在B组件的销毁前解除监听 避免重复监听
beforeDestroy () {
Bus.$off("message")
},