前言
在 Vue.js 中，有时需要实现各个组件之间的通信，有多种方法可以实现，其中依赖注入和观察者模式是常用的两种方式。本文将介绍一个 npm 包：@tozd/vue-observer-utils，它提供了一种简单易用的观察者模式的实现方式，用于在 Vue.js 应用中实现组件之间的通信。
安装
@tozd/vue-observer-utils 是一个 npm 包，可以通过 npm 或者 yarn 安装：
# 使用 npm npm install @tozd/vue-observer-utils --save # 使用 yarn yarn add @tozd/vue-observer-utils
使用方法
导入
先使用 import 或者 require 导入该包：
// 使用 import
import Observer from '@tozd/vue-observer-utils'
// 使用 require
const Observer = require('@tozd/vue-observer-utils')创建 Observer 实例
Observer 是一个类，需要通过 new 关键字创建一个实例：
const observer = new Observer()
添加监听器
可以使用 addObserver 方法为 Observer 实例添加监听器，参数是一个函数，即事件的回调函数。该函数接收两个参数：事件名称和事件附带的数据，例如：
observer.addObserver('login', (data) => {
alert(`收到 ${data.username} 的登录请求`)
})触发事件
可以使用 notify 方法触发事件，第一个参数是事件名称，第二个参数是事件需要附带的数据，例如：
observer.notify('login', { username: 'john', password: '123456' })当执行 observer.notify('login', { username: 'john', password: '123456' }) 后，会弹出提示框："收到 john 的登录请求"。
移除监听器
可以使用 removeObserver 方法移除监听器，参数是事件名称和对应的事件回调函数，例如：
const callback = (data) => {
alert(`收到 ${data.username} 的登录请求`)
}
observer.addObserver('login', callback)
observer.removeObserver('login', callback)示例
以一个简单的登录页面为例。登录页面有两个组件：LoginForm 组件和 UserCenter 组件，分别负责处理登录流程和展示用户信息。当用户登录成功后，UserCenter 组件需要更新用户信息。
LoginForm 组件
-- -------------------- ---- -------
----------
-----
-----------
----- ------------------------
-----
------ ---------------------------
------ ----------- ------------- ------------------ --
------
-----
------ --------------------------
------ --------------- ------------- ------------------ --
------
-----
------- -------------------------
------
-------
------
-----------
--------
------ -------- ---- --------------------------
------ ------- -
------ -
------ -
--------- ---
--------- --
-
--
-------- -
------- -
-- -------------------
------------------------------ - --------- -------------- --------- ------------- --
-
--
--------- -
-- - ----- ------- ------- ---- --------
-------------- - --- ----------
-
-
---------在 LoginForm 组件中，我们使用 this.$observer.notify 方法触发事件，将用户名和密码作为事件附带的数据传递给监听器。
UserCenter 组件
-- -------------------- ---- -------
----------
-----
-------- - -- ------------- -------
--------- ------------- -------
----------- ---------- ------
------
-----------
--------
------ -------- ---- --------------------------
------ ------- -
------ -
------ -
----- -
--------- --------
------ --
-
-
--
-------- -
------------ --------- ----- -- -
------------------ - --------
--------------- - -----
-
--
--------- -
-- - ----- ------- ------- ---- --------
-------------- - --- ----------
-- -----
----------------------------------- -- -------- -- -- -
-- --------- --- --- -
----------------- --------- ------ --------------------- --
-
--
--
--------------- -
-- -----
--------------------------------------
-
-
---------在 UserCenter 组件中，我们使用 this.$observer.addObserver 方法添加监听器，当接收到登录事件后，调用 updateUser 方法更新用户信息。
总结
@tozd/vue-observer-utils 是一个简单易用的 npm 包，提供了一种实现 Vue.js 组件之间通信的方式。在使用该包时，需要创建 Observer 实例，添加监听器，触发事件和移除监听器。本文通过一个简单的示例介绍了该包的使用方法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d0927023822852