在实际开发中，一个页面很少只包含一个组件，而是包含多个组件。不同的组件之间需要通过通信实现相互协作。而 Web Components 在这个方面的优势就在于其能源于浏览器原生的事件系统，并且可以支持所有的主流的事件传递方式。其中，发布-订阅模式是一种很好的设计模式，可以用于实现组件之间的通信。
发布-订阅模式
发布-订阅模式又叫做观察者模式（Observer Pattern），它定义了一种对象间的一对多的关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在这种模式中，对象之间是松耦合的，能够实现对象间的解耦。
在 Web Components 中，我们可以通过自定义事件来实现发布-订阅模式。我们通过 dispatchEvent 方法来分发自己定义的事件，然后在多个组件中通过 addEventListener 方法来监听这个事件的发生。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-- -------
-------------------------------------- ------- -- -
-------------------
---
-
------------------- -
-- -------
----- ----------- - --- -------------------------- -------- --------- ------ ----------
----------------------------------
-
-在上述示例中，我们自定义了一个名为 customEvent 的事件，并设置了其中的 message 属性。然后在 CustomComp 组件中，通过 dispatchEvent 分发了一个自定义事件。而在其他组件中，通过 addEventListener 方法监听了 customEvent 事件，并在回调中打印出事件的全部属性。
事件代理
然而，当组件之间的嵌套非常多的时候，对于每一个组件都进行 dispatchEvent 和 addEventListener 的操作会使得整个系统变得复杂而且不易于维护。这时，我们可以采用事件代理的方法。（事件代理是利用事件的冒泡原理，只在父元素上注册事件，然后通过判断事件源来触发事件。）
我们可以将多个组件的通信需求统一放到一个中央事件总线中，这个总线只需要在整个应用中初始化一次，其他组件可以通过这个总线进行事件的分发和监听。我们可以通过全局变量或者静态方法来实现中央事件总线。
-- -------------------- ---- -------
----- ----------- -
------ ------------------- ----- -
----- ----- - --- ---------------------- - ------- ---- ---
------------------------------
-
------ ---------------------- --------- -
------------------------------------ ------- -- -
-----------------------
---
-
-在上述示例中，我们创建了一个名为 EventCenter 的类，它包含了 dispatch 和 addListener 两个静态方法。其中 dispatch 方法用于分发事件，addListener 方法用于监听事件。我们在其中通过 CustomEvent 创建了自定义事件，并调用了 document 对象的 dispatchEvent 方法将事件分发出去。在 addListener 方法中，我们调用 document 对象的 addEventListener 方法并传入 eventName，当 EventCenter.dispatch 方法中的自定义事件被分发出去后，我们传入的回调函数就会被触发。
使用示例
下面给出一个主页-列表-详情的示例：
home.js
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
---------------
------- --------------- -------------
--
------------------------------------------------------------------- -- -- -
------------------------------- - -------- ----- -- ----- ---
---
-
-
---------------------------------- ----------list.js
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
---------------
----
-------- ------
-------- ------
-------- ------
-----
--
---------------------------------- ------ -- -
----------------------- ------------------
---
-
-
---------------------------------- ----------detail.js
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-----------------
--
---------------------------------- ------ -- -
------------------------- ------------------
---
-
-
------------------------------------ ------------我们在 HomeComp 中添加了一个按钮，并在其点击事件中分发了一个 to-list 自定义事件。在 ListComp 中和 DetailComp 中添加了对 to-list 事件的监听，并在回调函数中输出了事件的内容。
总结
以上是使用 Web Components 实现组件通信的一种常用方式，即使用发布-订阅模式。通过自定义事件实现多个组件之间的松耦合。我们也为大家提供了一个示例，供大家参考。希望这篇文章能够帮助大家更好地学习和使用 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c5537968c7c53b0b53c65