在前端开发中，组件化是一个非常关键的概念。Web Components 是一种新兴的技术，它可以帮助我们在 Web 上实现更加模块化和可复用的组件。而 Custom Elements 则是 Web Components 的一个重要组成部分，它允许我们在 HTML 中定义自定义元素并将其作为组件使用。
在 Web Components 中使用 Custom Elements 构建父子组件之间的交互，是非常常见的一种需求。本文将详细介绍如何在 Web Components 中使用 Custom Elements 来实现父子组件之间的交互。
Custom Elements 简介
Custom Elements 是 Web Components 的一个核心组成部分，它允许开发者定义自己的 HTML 元素，并将其扩展成自定义元素。这些自定义元素可以像原生 HTML 元素一样在文档中使用，并且可以绑定 JavaScript 行为。
Custom Elements 主要由两个 API 组成：customElements.define() 和 HTMLElement.prototype.connectedCallback()。其中 customElements.define()` 方法可以用来定义自定义元素，在这个方法中我们需要指定元素名称、元素继承的原生 HTML 元素、以及元素的 JavaScript 行为，如下所示：
customElements.define('my-custom-element', MyCustomElementClass, { extends: 'button' });在这个例子中，我们定义了一个叫做 my-custom-element 的自定义元素，继承自 HTMLButtonElement，同时声明了一个名为 MyCustomElementClass 的 JavaScript 类来实现元素的行为。
而 HTMLElement.prototype.connectedCallback() 则是在自定义元素与文档中其他元素建立关联时被调用的。在这个方法中，我们可以实现元素与其他元素的交互逻辑。
父子组件之间的交互
在 Web Components 中，我们经常需要实现父子组件之间的交互。比如，一个父组件中包含多个子组件，当某个子组件状态变化时，我们希望通知父组件以便做出响应。
实现父子组件之间的交互，通常有两种方法：事件和属性。下面我们分别来介绍这两种方法。
事件
事件是 Web 开发中常见的一种机制，它可以用来实现不同组件之间的交互。在 Web Components 中，对于父子组件之间的交互，我们也可以使用事件来完成。
具体来说，我们可以在子组件中定义自定义事件，并在子组件中触发该事件。父组件则可以监听该事件，并在事件触发时做出响应。
下面是一个示例代码，其中包含了一个父组件和一个子组件，子组件的按钮被点击时会触发 my-custom-event 事件，并向父组件发送消息：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
---------------------
------------
--------- ------------------------
-----
--------------
-------------
------
-----------
--------- -----------------------
-----------------------
-----------
--------
----- -------- ------- ----------- -
------------------- -
----- -------- - ----------------------------------------------
----- ----- - ---------------------------------
----- ---------- - ------------------- ----- ------ ---
------------------------------
---------------------
-
--------------- -
----- ------------ - -------------------------------
------------------------------------------------ --------------------------------------
-
--------------------------- -
----------------------------
-
-
----- ------- ------- ----------- -
------------------- -
----- -------- - ---------------------------------------------
----- ----- - ---------------------------------
------------------------
------------------
-
------------ -
----- ------ - -----------------------------
-------------------------------- ------------------------------------
-
-------------------- -
----- ----- - --- ------------------------------ -
------- - -------- ---------- --
---
--------------------------
-
-
---------------------------------- ----------
--------------------------------- ---------
---------
-------
-------在这个例子中，我们分别定义了一个 MyParent 类和一个 MyChild 类，分别代表父组件和子组件。在 MyChild 类中，我们定义了一个 my-custom-event 事件，并在触发该事件时向父组件发送了一条消息。
在 MyParent 类中，则监听了子组件的 my-custom-event 事件，并在该事件触发时弹出了一条消息。
属性
除了事件之外，我们还可以在 Web Components 中使用属性来实现父子组件之间的交互。
具体来说，我们可以在子组件中定义一些属性来描述组件的状态，父组件则可以通过这些属性获取子组件的状态信息。
下面是一个示例代码，其中包含了一个父组件和一个子组件，父组件会在子组件状态变化时更新其渲染：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
---------------------
------------
--------- ------------------------
-----
--------------
----------------------
-------------
------
-----------
--------- -----------------------
-----------------------
-----------
--------
----- -------- ------- ----------- -
------------------- -
---------- - -------
----- -------- - ----------------------------------------------
----- ----- - ---------------------------------
----- ---------- - ------------------- ----- ------ ---
------------------------------
--------------
-
-------- -
----- ------------ - -----------------------------------
---------------------- - ----------------------
-
--------------- -
---------- - ------
--------------
-
-
----- ------- ------- ----------- -
------------------- -
----- -------- - ---------------------------------------------
----- ----- - ---------------------------------
------------------------
------------------
-
------------ -
----- ------ - -----------------------------
-------------------------------- -----------------------------
-
------------- -
-------------------------- --------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
----- ------------- - ----------------
---------------------------------
-
-
-
---------------------------------- ----------
--------------------------------- ---------
---------
-------
-------在这个例子中，我们分别定义了一个 MyParent 类和一个 MyChild 类，分别代表父组件和子组件。在 MyChild 类中，我们定义了一个 state 属性，并在该属性变更时触发了 attributeChangedCallback 方法。在这个方法中，我们将变更后的属性值传递给了父组件，并请求其重新渲染。
在 MyParent 类中，则重写了一个 setState 方法，并在该方法中更新了组件的状态，并请求重新渲染。
总结
以上就是在 Web Components 中使用 Custom Elements 实现父子组件之间的交互的方法。总的来说，无论是使用事件还是属性，都需要注意组件间的耦合问题。尽可能地避免组件之间的紧耦合是开发高质量 Web Components 的关键。
最后，我们可以看到 Web Components 具有非常强大的可扩展性和可复用性，使用 Custom Elements 实现父子组件之间的交互只是其中的一个应用场景。值得我们在日常的 Web 开发中充分利用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6478002f968c7c53b0447393