简介
vue-easy-bus 是一个 Vue.js 插件，为开发者提供一种简单的跨组件通信方式。该插件通过创建一个全局事件订阅与发布的中心，使得任何组件都可以实时地共享状态或触发事件。
安装
使用 npm 的方式进行安装：
npm install vue-easy-bus --save
引入 Vue 插件
在 Vue 项目中，需要将 vue-easy-bus 插件进行全局引入：
import Vue from 'vue' import VueEasyBus from 'vue-easy-bus' Vue.use(VueEasyBus)
使用说明
为了使用 vue-easy-bus，我们需要首先进行中央事件总线的实例化：
const bus = new Vue()
然后，在需要进行状态共享和事件触发的组件中，我们可以通过以下方式进行订阅：
bus.$on('event-name', (payload) => {
console.log('接收到事件', payload)
})这里的 'event-name' 是我们定义的事件名称，payload 则可以传递任何类型的参数或数据。需要注意的是，为了避免全局事件污染，建议事件名称采用模块化的命名方式。
在需要触发事件的组件中，我们可以通过以下方式进行发布：
bus.$emit('event-name', 'Hello, world!')这里我们传递了一个字符串参数 'Hello, world!'，作为我们定义的事件的参数。
示例代码
-- -------------------- ---- -------
----------
-----
-----------
------------ ----- ------
------- -----------------------------
------
-----------
--------
------ ------- -
----- -------
------ -
------ -
------ -
-
--
--------- -
------------------------------ -- ----- -- -- -
---------- - -----
--
--
-------- -
---------- -
----- -------- - ---------- - -
-------------------------------- - ------ -------- --
-
-
-
---------在这个示例代码中，我们在首页组件中定义了一个计数器，通过订阅事件 'count-updated' 来更新当前计数。在点击增加按钮时，我们触发了 'count-updated' 事件，并传递更新后的计数值作为参数。
总结
vue-easy-bus 插件提供了一种简单而实用的跨组件通信方式。通过实例化中央事件总线，我们可以轻松地在任意两个组件之间共享状态和触发事件。希望本篇文章能够帮助读者更好地理解和使用 vue-easy-bus 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f94238a385564ab7091