前言
Web Components 是一个将多种 Web 技术组合在一起的集合，它可以让开发者创建可重用的自定义 HTML 元素，同时它还有诸如 Shadow DOM、HTML Templates 以及 Custom Elements 等技术。在 Web Components 中，组件通信是实现大型前端应用程序的关键，因为这样的应用程序通常包含许多组件，而这些组件需要互相通信才能实现彼此之间的功能搭配。
本篇文章将讨论 Web Components 中跨组件通信的方式及其技术细节，内容包括：
- Web Components 中的两种跨组件通信方式
- 使用属性传递信息
- 使用自定义事件传递信息
- 示例代码
Web Components 中的两种跨组件通信方式
在 Web Components 中，有两种主要的跨组件通信方式：
- 通过属性传递信息
- 通过自定义事件传递信息
这两种方式都是有效的，但具有不同的优势和限制，并可以根据需要进行组合使用。
使用属性传递信息
在 Web Components 中，通过属性传递信息是传递数据最常见的方式。这个技术涉及向一个组件实例传递数据，该实例通过其属性来检索数据。下面是一个使用属性传递信息的例子：
<my-custom-element some-property="foo"></my-custom-element>
这里，我们在 <my-custom-element> 这个自定义元素中使用了一个 some-property 属性，并将其设置为 foo，这样在该元素的实现中就可以获取到这个属性。
我们也可以将一个 JavaScript 对象分配给一个属性，这样就可以通过属性来检索对象本身的数据。例如：
let obj = {foo: 'bar'};
myCustomElement.someProperty = obj;在此示例中，我们使用 someProperty 属性将 obj 对象传递给 <my-custom-element> 组件实例。
使用自定义事件传递信息
在 Web Components 中，自定义事件是一个可选的跨组件通信方式，它允许一个组件向其它组件发出命令或传递信息。下面是一个使用自定义事件传递信息的例子：
myCustomElement.addEventListener('some-event', e => {
console.log(e.detail);
});在这个例子中，myCustomElement 使用 addEventListener 方法监听了一个名称为 some-event 的事件，并在事件触发时输出事件的 detail 属性。
当然，我们也可以通过自定义事件来传递数据：
let obj = {foo: 'bar'};
let event = new CustomEvent('some-event', {
bubbles: true,
detail: obj
});
myCustomElement.dispatchEvent(event);在此例中，我们创建了一个自定义事件 some-event 并附加了一个对象作为事件的 detail 属性。之后，我们使用 dispatchEvent 方法在 myCustomElement 上触发了该事件，从而向 <my-custom-element> 组件的其它部分传递了数据。
示例代码
下面是一个简单的 Web Components 示例，其中包含了以上讨论到的两种跨组件通信方式：
-- -------------------- ---- -------
---- ---------------------- ---
----------
-----
------ ------ ------------
--------- ----- ----------------------
------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - --------
------------------------------------
---------
----- ---------- - ------------------------ --------
---------------------------------------
---------- - -----
------------------------------------ - -- -
---------- - --------------
--------------
---
-
-------- -
-------------------------------------------------- - -----------
-
--- ------ -
------ -----------
-
--- ---------- -
---------- - -----
--------------
-
-
------------------------------------------------- -----------------
---------在上述示例中，我们创建了一个名为 my-custom-element 的组件，并定义了一个自定义 update-name 事件来传递数据。在 constructor 函数中，我们在组件上添加了一个事件侦听器，以便在每次收到 update-name 事件时更新组件内部的 _name 变量。
我们还定义了 name 访问器，并在 name 赋值时更新内部 _name 变量。最后，我们在 render 函数中，更新组件中 <span> 元素的文本内容。
下面是在 my-custom-element 组件中发送和接收消息的示例代码：
const myCustomElement = document.querySelector('my-custom-element');
myCustomElement.dispatchEvent(new CustomEvent('update-name', {
detail: {name: 'Alice'}
}));在上述代码中，我们获取了一个 my-custom-element 组件实例，并触发了一次 update-name 事件并传递了 {name: 'Alice'} 作为事件的 detail 属性。此时组件将会立即更新，其内容为 "Hello, Alice!"。
结论
Web Components 中跨组件通信的方式有两种：通过属性传递信息和通过自定义事件传递信息。前者允许将数据传递到组件中，而后者允许在组件之间发送和接收消息。在实际开发中，我们可以根据需要选择这两种方式的组合，构建更加灵活、可拓展的 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67491de44085ca58d2a88c22