前言
在前端开发中，组件化和视觉化管理是极为重要的。Storybook 是一款给组件开发提供注释性的工具，也是构建 UI 组件库的利器之一。 Storybook 通过展示组件示例，可以使得开发人员能够更加直观地看到组件的外部效果和内部结构。
在 Storybook 中，不同的组件示例可以被组织在不同的 stories 下，有时候不同的 stories 需要传递一些信息。例如，在一个 select 组件中选择了不同的选项，需要同步更新另一个组件。这时候，就需要在不同 stories 之间进行通信，这就要用到 npm 包 @storybook/channels。
本文将详细介绍如何使用 npm 包 @storybook/channels 进行 Storybook 中不同 stories 之间的通信，并含有相应的示例代码。
使用步骤
1. 安装@storybook/channels
使用 npm 或 yarn 安装 @storybook/channels：
- --- - ------------------- - - - ---- --- -------------------
2. 注册通道
在发送和接收通道消息之前，首先需要注册一个通道。我们需要在各自的 stories 中分别注册通道。
-- --------- --- ------ ------ - ------ - ---- -------------------- ------ - ----------- - ---- -------------- ------ ----- ------- - -------------------- --------------------------- ----- -- - --------------------- -------- ------- --- ----------------------------- - --------- ------ ------- --- -- --------- --- ------ ------ ----- ------- - ------------------
我们在上面示例代码中，通过 addons.getChannel() 的方式返回一个已经存在的通道，我们也可以通过 createChannel() 的方式创建一个新的通道并注册。
3. 定义事件监听器和事件发布器
在每个 stories 中，需要定义一个事件监听器（listener）和事件发布器（emitter），以完成 message 的发送和接收。示例代码如下：
EventEmitter.js
------ ----- ---- --------
------ - ------- - ---- ------------
------ ------- ----- ------------ ------- --------------- -
----------- - -- -- -
----------------------------- - ----- ---- ---
-
-------- -
------ -
------- ------------------------------- ----------------
--
-
-在这里，我们定义了一个叫做 EventEmitter 的组件，当点击按钮时就触发了一个名为 "my-event-name" 的事件，同时将一些数据传递给了事件发布器。用户可自定义事件名。
EventListener.js
------ ----- ---- --------
------ - ------- - ---- ------------
------ ------- ----- ------------- ------- --------------- -
------------------- -
--------------------------- ------- ---- -- -
-------------------
---
-
-------- -
------ --------------- -- -----------------
-
-上述代码定义了一个名为 EventListener 的组件，它在 componentDidMount 阶段开始监听事件 "my-event-name"，并输出事件对象到 console 中。
4. 启动 Storybook
检查完上述代码是否编写正确后，我们执行命令 npx start-storybook 或 npm run storybook 启动 Storybook。
5. 触发事件
打开 Storybook，我们可以看到页面渲染出来了 EventListener 和 EventEmitter 两个组件。我们点击 EventEmitter 组件的按钮，你将可以在 console 窗口中看到来自 EventListener 组件的事件输出。
到此，我们就成功实现了在不同 stories 之间进行消息的发送与接收。
总结
上述代码只是 @storybook/channels 的一个简单使用场景。在业务场景下，@storybook/channels 可以通过接收形如 {type: 'REQUEST_SOMETHING', payload: {}} 的消息来触发页面跳转或变更。@storybook/channels 可以实现跨 stories、跨组件之间的信息传递，具备广泛的应用场景。
示例代码
如下是本文的完整示例代码：
-- --------- --- ------
-- ----------
------ - ------ - ---- --------------------
------ - ----------- - ---- --------------
------ ----- ------- - --------------------
--------------------------- ----- -- -
--------------------- -------- -------
---
----------------------------- - --------- ------ ------- ---
-- ----------------
------ ----- ---- --------
------ ------------ ---- -----------------
------ ------------- ---- ------------------
------ ------- -
------ --- -------------------
---------- -------------
--
------ ----- ------- - -- -- -
--
-------------- --
------------- --
---
--
-- ---------------
------ ----- ---- --------
------ - ------- - ---- ------------
------ ------- ----- ------------ ------- --------------- -
----------- - -- -- -
----------------------------- - ----- ---- ---
-
-------- -
------ -
------- ------------------------------- ----------------
--
-
-
-- ----------------
------ ----- ---- --------
------ - ------- - ---- ------------
------ ------- ----- ------------- ------- --------------- -
------------------- -
--------------------------- ------- ---- -- -
-------------------
---
-
-------- -
------ --------------- -- -----------------
-
-欢迎各位阅读本文，若还有不明白的地方，可多多交流。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/98517