引言
Vue.js 是一个优秀的前端框架，它的流行也使得很多开发者在做项目时都选择使用它。但是，尽管 Vue.js 功能十分强大，但在开发过程中仍然存在一些难点或者痛点。其中，组件间信息传递就是一个常见的问题，其解决方案也十分繁琐。不过，这里介绍的 npm 包 vue-listen 可以很好地解决这个问题。
什么是 vue-listen？
vue-listen 是一个 Vue.js 组件通信库，它支持复杂的条件监听并且是双向绑定的。在 vue-listen 中，一般情况下，通过 $on 和 $emit 方法来实现组件间通信。
安装 vue-listen
使用 npm 安装 vue-listen 是一个很好的选择，执行以下命令即可：
npm install vue-listen --save
使用 vue-listen
使用 vue-listen 可以分为 3 个步骤：
第一步：在 Vue 中引用 vue-listen
import Vue from 'vue' import VueListen from 'vue-listen' Vue.use(VueListen)
第二步：在组件中注册监听事件
-- -------------------- ---- -------
----------
-----
------ ------
------
-----------
--------
------ - ------ - ---- ------------
------ ------- -
----- -------------
------- -- -
-- ------
------------ ------------ ------- -- -
---------------- ----------
--
-
-
---------在 mounted 生命周期中使用 listen 函数完成注册监听事件，它有四个参数：
$el: 组件实例'eventName': 事件名称function: 回调函数type: 事件监听类型，默认值为 'setter'，也就是监听的是组件属性，如果设置为 'method'，则监听的是组件方法
第三步：在组件中触发事件
触发事件可以通过组件实例调用 $emit 方法来完成：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ ------- -
----- -------------
-------- -
----------- -- -
-- ----
----------------------- -----
-
-
-
---------此时，组件 A 中的监听事件即可收到来自组件 B 的事件。
vue-listen 用例
下面，我们通过一个例子，介绍 vue-listen 的使用步骤。
首先，创建两个基于 Vue.js 的组件：send.vue 和 receive.vue。
其中，send.vue 里面有一个按钮，点击按钮后会发送一个事件，receive.vue 则需要接收到这个事件以获取发送的内容，并将其渲染出来。
send.vue
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ - ---- - ---- ------------
------ ------- -
----- -------
-------- -
----------- -- -
-- -- ----------------- --
---------- ------------------ ------ -------
-
-
-
---------receive.vue
-- -------------------- ---- -------
----------
-----
------------- ------- -------
------
-----------
--------
------ - ------ - ---- ------------
------ ------- -
----- ----------
---- -- -
------ -
-------- --
-
--
------- -- -
-- -- ----------------- --
------------ ------------------ ----- -- -
------------ - ---
--
-
-
---------现在，我们将这两个组件存储在 App.vue 中，最终的代码如下：
App.vue
-- -------------------- ---- -------
----------
-----
-------------
-------------------
------
-----------
--------
------ ---- ---- -----------------------
------ ------- ---- --------------------------
------ --------- ---- ------------
------ ------- -
----- ------
----------- -
-----
-------
--
------- -- -
-- -- ---------
------------------------
-
-
---------最终的效果如下：
总结
vue-listen 提供了一种简单、高效的组件间通信方式，对于有多个需要实现信息交换的组件的情况，它尤为适用。本文介绍了 vue-listen 的基本使用，希望对您有帮助。如果您有什么疑问或建议，欢迎在评论区留言，我们将尽快回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3d81e8991b448db02c