在前端开发中，我们经常会使用 Custom Elements 来创建组件，这种方式使我们可以构建可重用、可组合的 UI 组件。但是，如何在 Custom Elements 中实现数据传递是一个比较困难的问题，特别是在组件之间传递数据的情况下。本文将详细讨论如何在 Custom Elements 中实现数据传递，并提供示例代码指导读者使用。
Custom Elements 简介
Custom Elements 是 Web Components 的一部分，Web Components 为开发者提供了一种开发可重用组件的方式。Custom Elements 提供了一种将 HTML 元素定义为独立的、可重用的组件的方式。这里所谓的“独立”是指 Custom Elements 的实现与浏览器的实现无关，因此我们可以方便地在不同的项目中使用 Custom Elements，而不必担心兼容性问题。同时，Custom Elements 提供了一些事件和方法，用于与组件进行交互。
数据传递
Custom Elements 中的数据传递有两种方式：
- 使用属性（属性传递）
- 使用事件（事件传递）
属性传递
属性传递是 Custom Elements 中最常用的数据传递方式之一。当一个 Custom Element 的属性发生变化时，我们可以观察到这一变化，并作出相应的响应。
首先，我们需要在 Custom Element 中定义属性。这可以通过调用 this.definePropery 方法来实现，如下所示：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------------ ---------
------------------------- - -
-----
------ -----------------------
------ ----------- ---------- --
----------- -----------------------
------
--
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
-------------------------------------------------- - ---------
-
-
--- ------- -
------ ---------------------------
-
--- ------------ -
-------------------------- -------
-
-
--------------------------------------- ---------------在这里，我们定义了一个叫做 value 的属性。当该属性发生变化时，我们调用 attributeChangedCallback 方法，这个方法会检测 value 是否发生了变化，如果发生了变化，我们就更新输出（output）的内容。
接下来，我们可以在 HTML 中使用 sample-element：
<sample-element value="Hello, world!"></sample-element>
当 sample-element 中的 value 属性发生变化时，我们会观察到输出中的内容也发生了变化。
事件传递
事件传递是 Custom Elements 中另外一种数据传递方式。当 Custom Elements 中的某些事件发生时，我们可以将这些事件传递给其他元素或组件。事件传递可以让我们在不同的组件之间进行通信，并且使组件的代码分离更加清晰。
首先，我们需要在 Custom Element 中定义事件。这可以通过调用 this.dispatchEvent 方法来实现，如下所示：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------------ ---------
------------------------- - -
--------------------
--
-
------------- -
---------------------- -------------------- -
------- -
-------- ------- -------
-
----
-
------------------- -
----------------------------------------------------------------- -- -- -
------------------
---
-
-
--------------------------------------- ---------------在这里，我们定义了一个叫做 click 的事件。当该事件发生时，我们调用 handleClick 方法并触发这个事件。值得注意的是，我们在这里使用了 CustomEvent 构造函数，这个构造函数可以在事件中携带一些附加信息。
现在，我们假设我们有另外一个 Custom Element 叫做 receiver-element，这个组件会响应 sample-element 发送的 click 事件，并展示接收到的消息。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
------------------------ ---------
------------------------- - -
-------------------------------- ------------------------
--
-
------------------ -
----- ------- - ---------------------
--------------------------------------------------- - --------
-
------------------- -
------------------------------ ------
-
-
----------------------------------------- -----------------在这里，我们将 receiver-element 的 handleEvent 方法注册为 click 事件的处理程序。当事件发生时，事件绑定在 this 上，因此它会自动调用 handleEvent 方法。
现在，我们可以在 HTML 中使用这两个 Custom Element，并测试它们之间的事件传递：
<sample-element></sample-element> <receiver-element></receiver-element>
点击 sample-element 中的按钮，我们会观察到 receiver-element 中的消息发生变化。
总结
在本文中，我们深入探讨了在 Custom Elements 中实现数据传递的两种方式：属性传递和事件传递。这两种方式都非常实用，可以让我们灵活地使用 Custom Elements 来构建可重用、可组合的 UI 组件。希望本文内容能够帮助到读者更好地理解 Custom Elements，并在实际项目中应用 Custom Elements。如果你有任何疑问或建议，请留言评论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530c3697d4982a6eb252ccf