前言
Custom Elements API 使我们可以定义自己的 HTML 标签及其行为。因此，我们可以通过使用自定义元素来创建我们自己的组件，这将使我们更轻松地将其用于项目中。使用自定义元素技术，我们需要解决多个组件通讯的问题。本文将讨论 Custom Elements 中子组件与父组件之间的通讯。
父组件向子组件传值
有时候，我们需要将一些属性从父组件传递到子组件中。我们可以使用以下方法：
方法一：使用 HTML 属性
<custom-element attribute="value"></custom-element>
通过在 HTML 中定义自定义元素时设置属性，子元素将自动获得这些传入的属性值。我们可以使用以下方式在子组件中访问这些属性。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-
------------------- -
--------------------------------------------
-
-
--------------------------------------------- --------------方法二：使用自定义元素的属性
<custom-element attribute="value"> <child-element attribute="value"></child-element> </custom-element>
在这里，子元素可以通过自定义元素的 properties 属性使用传递的参数。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ --------------
-
------------------- -
--------------------------------------------
-
------------------------------ --------- --------- -
-------------------- ------- ---- ----------- -- --------------
-
-
--------------------------------------------- --------------子组件向父组件传值
有时候我们需要将从子组件中得到的值发送到父组件。为此, 我们可以使用以下方法:
方法一：通过 DOM 事件
我们可以通过在子元素上分发自定义的 DOM 事件来实现这个目标，然后在其父元素上侦听此事件。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
------------ - --
-
------------------- -
---------------------------------- -- -- -
------------ -- --
---------------------- ------------------------------ - ------- ------------ ----
---
-
-
--------------------------------------------- --------------在父元素中，我们需要添加事件监听器，以便他们可以使用 child-element 元素发送的事件接收倒计时。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
--------- -----------
-------------------------------
----------- ----- ------------------------
--
-
------------------- -
----- ------------ - -----------------------------------------------
----------------------------------------------------- - ---------------------
------------------------------------------------ ----- -- -
----------------------------------------------------- - -------------
---
-
-
---------------------------------------------- ---------------这里， increment 事件在子元素中被触发，并且在此事件监听器内部， counter-updated 事件被创建，并带有更新后口令长度的 detail 参数。 counter-updated 事件将在父级元素中侦听。
方法二：直接使用父元素的方法
由于自定义元素的一个重要特性是它们可以包装现有的 HTML 元素，并为其添加新的行为和属性，因此，我们可以通过拓展祖先元素的生成对象来实现。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
------------------------------ -- -- -
---------------
---
-
------------------- -
------------ - --
-
--------- -
------------ - ------------ - --
--------------------------
-
-
--------------------------------------------- --------------在这种情况下，子组件直接访问给它一个函数以触发父元素中的逻辑。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
--------- -----------
-------------------------------
----------- ----- ------------------------
--
-
------------------- -
------------ - --
-
--------- -
------------ - ------------ - --
----------------------------------------------------- - -------------
-
-
---------------------------------------------- ---------------在这里，子元素触发 upValue() 方法，从而触发祖先元素中的逻辑。
总结
本文介绍了父子组件通讯的多种方法，包括了以下两种情况：
- 父级元素向下级元素传递数据
- 子元素向父级元素传递数据
对于需要添加更高度自定义可复用性的组件，自定义元素技术是非常实用的。在考虑将组件引入项目中时，了解组件之间如何通信，以确保代码更健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654c7f877d4982a6eb5fb4b3