vue采用EventBus实现跨组件通信及注意事项

Panda 发布于2019-08-22 18:04 / 2557人阅读

摘要：挂载到添加文件第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型事件订阅监听当前实例上的自定义事件。取消事件订阅，移除自定义事件监听器。

EventBus

EventBus是一种发布/订阅事件设计模式的实践。
在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。

挂载EventBus到vue.prototype

添加bus.js文件
//src/service/bus.js

export default (Vue) => {
  const eventHub = new Vue()
  Vue.prototype.$bus = {
  /**
   * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型
   * @method $on  事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
   * @method $off  取消事件订阅，移除自定义事件监听器。  https://cn.vuejs.org/v2/api/#vm-off  https://github.com/vuejs/vue/issues/3399
   * @method $emit  事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
   * @method $once  事件订阅, 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
   */
    $on (...event) {
      eventHub.$on(...event)
    },
    $off (...event) {
      eventHub.$off(...event)
    },
    $once (...event) {
      eventHub.$once(...event)
    },
    $emit (...event) {
      eventHub.$emit(...event)
    }
  }
}

import BUS from "./service/bus"
BUS(Vue)

注意事项

事件订阅($on)必须在事件广播($emit)前注册；

取消事件订阅($off)必须跟事件订阅($on)成对出现。

使用场景

跨路由组件使用eventbus通信
假设a路由跳转b路由需要通过eventbus通信，先观察路由跳转前后a,b组件的生命周期钩子函数，可以发现两者是交叉执行的。
由于事件订阅必须在事件广播前注册，所以事件订阅可以放在b组件beforeCreate,created,beforeMout钩子函数中，而事件广播可以放在a组件的beforeDestroy,destroyed中。
取消事件订阅必须跟事件订阅成对出现，否则会重复订阅，对javascript性能造成不必要的浪费。因此B组件销毁前需取消当前事件订阅。

A组件

    beforeDestroy () {
    //事件广播
      this.$bus.$emit("testing", color)
    }

B组件

    created () {
    //事件订阅
      this.$bus.$on("testing", (res) => { console.log(res) })
    },
    beforeDestroy () {
      this.$bus.$off("testing")
    }

2.普通跨组件通信：由于两组件几乎同时加载，因此建议事件广播放在created钩子内，事件订阅放在mouted中即可。具体使用场景建议在两组件分别打印生命钩子函数进行准确判断。

  beforeCreate: function () {
    console.group("A组件 beforeCreate 创建前状态===============》")
  },
  created: function () {
    console.group("A组件 created 创建完毕状态===============》")
  },
  beforeMount: function () {
    console.group("x组件 beforeMount 挂载前状态===============》")
  },
  mounted: function () {
    console.group("x组件 mounted 挂载结束状态===============》")
  },
  beforeUpdate: function () {
    console.group("x组件 beforeUpdate 更新前状态===============》")
  },
  updated: function () {
    console.group("x组件 updated 更新完成状态===============》")
  },
  beforeDestroy: function () {
    console.group("x组件 beforeDestroy 销毁前状态===============》")
  },
  destroyed: function () {
    console.group("x组件 destroyed 销毁完成状态===============》")
  }

云服务器混合云 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95459.html

vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
VUE前端工程化（一）（掌握组件的多种通信及数据同步）

摘要：是一个事件，它向下传播到当前实例的所有后代。由于后代扩展为多个子树，事件传播将会遵循许多不同的路径。组件修改实现递归地在父链上传播事件。组件通信父子组件通信父传子 props属性子传父 $emit事件这两种官方文档里有很详细的介绍就不解释了还是举个栗子： //parent.vue父组件 parent: {{money}} ...

Tony_Zby 2019-08-26 14:05 评论0 收藏0
Vue动态加载异步组件

摘要：目前采用动态加载异步组件的方式来实现小组件之间的通信。内容使用过的都应该知道的动态加载组件通过来绑定需要加载的组件。总结本篇主要借助的动态组件和打包单文件来实现动态加载异步组件，通过的事件总线挂载在上来实现平级组件之间的通信。背景：目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信，这种...

awesome23 2019-08-26 13:22 评论0 收藏0
实现一个发布订阅

摘要：表示事件类型回调函数，当监听的事件类型触发时，执行函数冒泡还是捕获等参数原生中，我们通过注册事件订阅，比如鼠标点击，传入回调函数在注册的事件触发时要执行的函数，那么鼠标点击时发布，传入的回调函数就会执行。在常用的MVVM框架比如vue，组件间通信可能会有以下三种情况： 1. 父子通信：通过props 2. 非父子组件组件用eventBus通信 3. 如果项目很大，数据需要共享到多个组...

Aceyclee 2019-08-22 16:09 评论0 收藏0
前端面试汇总VUE(二)

摘要：采用了新旧的对比，获取差异的，最后一次性的更新到真实上。对基本属性进行监听对对象进行监听对对象某一个属性监听监听自定义指令全局指令，第一个参数是指令名，第二个参数是一个对象，对象内部有个的函数，函数里有这个参数，表示绑定了这个指令的元素。 11.vue 虚拟DOM的理解 Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化， ...

Sanchi 2019-08-23 18:29 评论0 收藏0