zoukankan      html  css  js  c++  java
  • Vue事件总线(EventBus)

    简介

      EventBus 又称为事件总线,在vue中可以使用 EventBus 来作为沟通的桥梁,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件可以上下平行的通知其它组件,主要用于兄弟组件或者两个页面(组件)之间没有任何的引入和被引入的关系。但是需要谨慎使用。

    使用

     一、初始化

    • 创建事件总线并将其导出
    // vue 的事件总线
    import Vue from "vue";
    let EventBus = new Vue();
    export default EventBus;
    
    • 本质上它是一个不具备DOM结构的组件,仅仅是有它的实例方法而已。

    • 另一种初始化的方式是在 main.js 中
      Vue.prototype.$EventBus = new Vue()

     二、发送事件

    • 使用 EventBus.$emit(channel: string,callback(payload,...))
    EventBus.$emit("redpackmsg",{packid:obj.content.id,contest_type:obj.content.contest_type});
    

     三、接受事件

    • 使用 EventBus.$on(channel: string,callback(payload,...))
    EventBus.$on("redpackmsg",(obj)=>{
      this.chaildpackid = obj.packid;
      this.contest_type = obj.contest_type;
    })
    

     四、移除事件监听

    • 使用 EventBus.$off(channel: string,{}),参数为可选的。
      beforeDestroy(){
        EventBus.$off("redpackmsg",{});
      }
    
    • EventBus.$off(channel: string),移除应用所有对此事件的监听

    • EventBus.$off(), 移除所有的事件频道

     五、注意事项

    • 如果不移除事件监听,如果反复进入到创建事件监听的页面时,之前的监听事件仍保留着,就会造成事件可能触发多次的现象,从而会产生一些bug。
  • 相关阅读:
    physicslectureGriavity
    electromagnetic
    dp
    physicsmechanic wave
    C# 2.0 Specification(迭代器)(二)
    C#类、接口、虚方法和抽象方法接口与抽象类的区别实例
    web.config connectionStrings 数据库连接字符串的解释(转载)
    onpropertychange事件
    C#中ParameterizedThreadStart和ThreadStart区别
    C# 文件操作全收录
  • 原文地址:https://www.cnblogs.com/aloneer/p/14411543.html
Copyright © 2011-2022 走看看