美文网首页
vue 中使用eventBus兄弟组件传递事件 实现方式

vue 中使用eventBus兄弟组件传递事件 实现方式

作者: 柚子硕 | 来源:发表于2019-12-15 11:11 被阅读0次
    eventBus 适用于同级组件或者互无关系的页面之间通信,可以传递事件以及数据

    1.在项目中新建一个JS文件 eventBus.js


    image.png

    2.在发送事件的页面

    ## 在<script>下引入 eventBus 
    import eventBus from "@/utils/eventBus.js"; 
    
    ## 通过$emit() 传递事件
    eventBus.$emit('eventName',{params:'传递的参数'})
    

    3.在另一个一面的 mounted内 接收事件

      mounted() {
        ##在eventBus内的this会改变指向,所以声明that, $on 开启eventBus 监听
    
        let that = this;
        eventBus.$on("eventName",function (data) {
          console.log(data) // 打印结果 = '传递的参数'
        });
      }
    

    4.接收事件的组件没挂载之前仍会接受 $emit,会排队等待dom挂载后 接收全部之前发出的事件,会报错 !

    ## 这是接收事件的页面
    
     mounted() {
        let that = this;
        eventBus.$on("eventName",function (data) {
          console.log(data) // 打印结果 = '传递的参数'
        });
      },
    beforedestroy(){
    ## 在beforedestroy 关闭 eventBus监听
    
     eventBus.$off("eventName");
    }
    
    

    【有收获请点个赞哦~~】

    相关文章

      网友评论

          本文标题:vue 中使用eventBus兄弟组件传递事件 实现方式

          本文链接:https://www.haomeiwen.com/subject/mellgctx.html