vue中eventBus的使用

使用場景:
一、兄弟組件的通訊,父子組件的通訊
二、不一樣路由的通訊
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

相關文章
相關標籤/搜索