美文网首页
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兄弟组件传递事件 实现方式

    eventBus 适用于同级组件或者互无关系的页面之间通信,可以传递事件以及数据 1.在项目中新建一个JS文件 e...

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

  • vue 事件总线EventBus的概念、使用

    两个组件之间毫无关系,用到 vue 中的事件总线 EventBus的概念来传递数据 EventBus又称事件总线,...

  • Vue-自定义事件

    在父组件使用prop 传递数据给子组件,子组件则是通过事件传递数据给父组件的。 Vue实例都会实现事件接口: 1....

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • vue兄弟组件之间通信--eventBus

    原文地址 eventBus eventBus单独的事件中心,用来管理组件之间的通信。 由于 Vue 实例实现了一个...

  • vue使用v-model实现父子组件间通信

    前言 vue父子组件之间的通信方式: 父组件到子组件:通过props传递数据; 子组件到父组件:通过自定义事件实现...

  • vue.js 兄弟组件传值

    vue兄弟组件如何传值?兄弟组件如何相互操作组件里面的函数? 1、兄弟之间传递数据需要借助于事件车,通过事件车的方...

  • vue兄弟组件通信

    vue 兄弟组件之间的传值 一. 子传父,父传子。 二. 1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传...

  • Vue EventBus 使用与插件开发

    Vue EventBus 使用与插件开发 自定义事件 如果事件要广播(被多组件使用) 内存泄漏问题 简单使用 注意...

网友评论

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

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