vue中eventBus的使用

使用场景：

针对兄弟组件的通信，父子组件的通信
新建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")  
 },

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6776