在 Web Components 中，父组件通过使用插槽将子组件嵌入其模板中。但是，这并不是唯一的通信方式。本文将介绍 Web Components 父子组件之间的其他通信方式，以及在实际开发中采用的最佳实践。
父组件向子组件传递数据
父组件可以使用 HTML 属性和自定义属性将数据传递给子组件。这些属性可以在子组件中使用 this.getAttribute('name') 和 this.dataset.name 获取。
通过 HTML 属性传递数据
父组件中的 HTML 模板片段可以包含表示子组件的元素，带有属性作为数据传递给子组件，例如：
<custom-element id="child" message="Hello, child!"></custom-element>
在子组件的 connectedCallback() 方法中，可以使用以下代码获取属性值：
connectedCallback() {
const message = this.getAttribute('message');
}通过自定义属性传递数据
父组件可以使用 setAttribute() 方法在子组件中添加自定义属性。例如：
const child = document.createElement('custom-element');
child.setAttribute('data-message', 'Hello, child!');在子组件中的 connectedCallback() 方法中，可以使用以下代码获取自定义属性值：
connectedCallback() {
const message = this.dataset.message;
}子组件向父组件传递数据
子组件可以通过自定义事件将数据传递回父组件。在子组件中，可以使用 this.dispatchEvent() 方法发送自定义事件。例如：
const event = new CustomEvent('custom-event', { detail: { message: 'Hello, parent!' } });
this.dispatchEvent(event);在父组件中，我们需要使用 addEventListener() 方法来监听自定义事件。
document.querySelector('custom-element').addEventListener('custom-event', (event) => {
const message = event.detail.message;
});最佳实践
在实际开发中，我们可以结合使用上述两种方式来实现最佳实践。
实现父子组件的双向通信
我们可以在父组件中定义一个方法来接收子组件中的数据。在子组件中，我们可以通过自定义事件将数据传递回父组件。代码实现如下：
-- -------------------- ---- -------
---- --- ---
--------------- -----------------------------
---- --- ---
--------------- ----------------------------
--------
----- --------------- ------- ----------- -
------------- -
--------
------------ - ---
-
------------------- -
------------------------------------- ------- -- -
------------ - ---------------------
---
-
------------ -
--------------------------
-
-
----- -------------- ------- ----------- -
------------- -
--------
------------ - ------- ---------
-
------------------- -
----- ----- - --- --------------------------- - ------- - -------- ------------ - ---
--------------------------
-
-
--------------------------------------- -----------------
--------------------------------------- ----------------
---------在上面的代码中，我们定义了两个组件，父组件 ParentComponent 和子组件 ChildComponent。在父组件中，我们定义了一个名为 logMessage() 的方法，用于在控制台输出子组件中传递的消息。在子组件中，我们在 connectedCallback() 方法中使用自定义事件将消息传递给父组件。在父组件中，我们使用 addEventListener() 方法监听自定义事件，并在事件回调函数中设置消息。
结论
在 Web Components 中，父子组件之间的通信可以通过使用 HTML 属性和自定义属性来实现数据传递，使用自定义事件来实现双向通信。通过结合使用这些技术，我们可以实现灵活且高效的父子组件通信。建议在实际开发中采用这种最佳实践，以确保代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67331afc0bc820c582408e0b