在现代 web 开发中，自定义元素越来越被广泛应用，它们可以帮助我们创建复杂的组件和构建更加灵活的页面。然而，在使用自定义元素的过程中，通信是一个经常遇到的问题，因为不同的元素之间需要共享数据或者交互。那么，如何实现自定义元素之间的通信呢？本文将为大家介绍几种常用的方式，并结合代码示例进行详细讲解。
一、事件监听
事件监听是一种非常常用的实现自定义元素之间通信的方式。我们可以在一个元素上监听一个自定义事件，然后在其它元素上触发这个事件，从而实现元素之间的通信。
在自定义元素中，我们可以使用 dispatchEvent 方法触发一个事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------------------- ----- -- -
----------------- ----- ------- --------- --- ----- ----- ---- ----- ------------------
---
-
------------ -
---------------------- ------------------ - ------- ------ ------- ----
-
-在上面的例子中，我们在自定义元素的构造函数中监听了一个 foo 事件，然后在 someMethod 方法中触发了这个事件。当其它元素触发了 foo 事件时，我们就可以在这个元素中捕获到这个事件。
当然，在其它元素中触发这个事件也非常简单，只需要调用相应元素的 dispatchEvent 方法即可：
// Triggering the "foo" event on someElement
const someElement = document.querySelector('#some-element');
someElement.dispatchEvent(new CustomEvent('foo', { detail: 'Hello world!' }));二、属性监听
除了事件监听，使用属性监听也是实现自定义元素之间通信的一种方式。当我们在一个元素上设置或者更改了某个属性时，我们就可以在其它元素上监听这个属性的变化，并实现元素之间的通信。
在自定义元素中，我们可以使用 attributeChangedCallback 方法监听属性的变化：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ --------
-
------------------------------ --------- --------- -
---------------- --------- --------- --- ------- ---- ------------- -- ----------------
-
-在上面的例子中，我们使用了 observedAttributes 静态属性来定义我们要监听的属性列表，然后在 attributeChangedCallback 方法中获取到了属性的名称、旧值和新值。当我们在这个元素上更改这个属性时，就会触发 attributeChangedCallback 方法。
而在其它元素中监听这个属性的变化也非常简单，只需要使用 addEventListener 方法监听 attributechange 事件即可：
const someElement = document.querySelector('#some-element');
someElement.addEventListener('attributechange', event => {
if (event.target.getAttribute('foo') === 'bar') {
console.log('The "foo" attribute changed to "bar"');
}
});三、上下文
除了事件监听和属性监听，使用上下文来实现自定义元素之间通信也是一个非常不错的方式。我们可以在一个元素中定义一个全局上下文对象，然后在其它元素中访问这个对象，从而实现元素之间的通信。
在自定义元素中，我们可以使用 window 对象来实现这个上下文：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
---------------- - - ---- ----- --
-
-
----- -------------- ------- ----------- -
------------ -
---------------- ----- -- ----- -- --- ------ ------- --- --------------------------
-
-在上面的例子中，我们在一个元素的 connectedCallback 方法中定义了一个全局上下文对象 window.myContext，然后在另一个元素的 someMethod 方法中访问了这个对象。当然，这个方式也可以用来访问其它全局的对象变量。
四、结语
在本文中，我们介绍了几种实现自定义元素之间通信的方式，包括事件监听、属性监听和使用上下文。每种方式都有自己的优点和局限性，我们可以根据实际需求来选择使用哪种方式。希望本文可以帮助大家更好地理解自定义元素之间通信的实现方式，从而更加高效地开发 web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6783190c935627c900295683
