使用場景:
一、兄弟組件的通訊,父子組件的通訊
二、不一樣路由的通訊vue
針對兄弟組件的通訊,父子組件的通訊
新建bus.js文件this
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
})
} it
針對不一樣路由的通訊io
須要在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")
},console