Web Components 是一个用于创建可复用的自定义元素和组件的规范，它被广泛应用于现代 Web 应用的开发中。在 Web Components 中，组件之间的数据传递是非常常见的一个问题。本文将会对 Web Components 中常用的组件传值技巧进行探究，并提供详细的示例代码和指导意义，帮助读者更好地掌握这些技巧。
父子组件传值
在 Web Components 中，父子组件之间的数据传递是最基本的一种情况。下面以一个简单的例子来介绍如何在父组件中向子组件传递数据。假设我们有一个 parent-component 和一个 child-component，我们需要在 parent-component 中向 child-component 传递一个属性 greeting：
-- -------------------- ---- -------
---- ---------------- ---
----------
---------------- -----------------------------------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
-
-
----------------------------------------- -----------------
---------
---- --------------- ---
----------
-------
-----------
--------
----- -------------- ------- ----------- -
------ --- -------------------- -
------ -------------
-
------------- -
--------
----- -------- - ----------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
-
------------------------------ --------- --------- -
-- ----- --- ----------- -
---------------------------------------------- - ---------
-
-
-
---------------------------------------- ----------------
---------
---- --------- ---
--------- -------------------------------
-----
---------- --------------
-----------------------------------
------
-----------
--------- ------------------------------
-----
--------- --------------
-------
------
-----------在上面的代码中，我们在 parent-component 中通过属性 greeting 向 child-component 传递了一个字符串 "Hello"。在 child-component 中，我们通过 observedAttributes 来监听 greeting 属性的改变，在 attributeChangedCallback 中将其渲染到页面上。
通过上面这个简单的例子，我们可以学习到在父子组件之间传递数据的基本方法：在父组件中通过属性将数据传递给子组件，并且在子组件中监听属性的改变，将其渲染到页面上。
子父组件传值
在 Web Components 中，由于组件可以嵌套多层，所以也有可能需要在子组件中向父组件传递数据，这时就需要用到事件的机制。下面还是以一个简单的例子来说明，假设我们需要在 child-component 中点击一个按钮时向 parent-component 中传递一个字符串 "Hello"：
-- -------------------- ---- -------
---- ---------------- ---
----------
-----
---------- --------------
-----------------------------------
-------
------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
-------------------------------------------------------------------------- - -- -
---------------------------------------------- - --------------
---
-
-
----------------------------------------- -----------------
---------
---- --------------- ---
----------
------------- -----------
-----------
--------
----- -------------- ------- ----------- -
------------- -
--------
----- -------- - ----------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
----------------------------------------------------------------- - -- -
----- ----- - --- -------------------- -
-------- -----
--------- -----
------- ------ --------
---
--------------------------
---
-
-
---------------------------------------- ----------------
---------
---- --------- ---
--------- -------------------------------
-----
---------- --------------
-----------------------------------
-------
------
-----------
--------- ------------------------------
------------- -----------
-----------在上面的代码中，我们在 child-component 中创建了一个 click 事件，然后在事件处理程序中创建了一个自定义事件 hello，并且将其发射出去。在 parent-component 中，我们通过 shadowRoot.querySelector() 来找到子组件，并且将监听 hello 事件，将事件的 detail.text 字符串渲染到页面上。
通过上面这个例子，我们可以学习到在子组件中向父组件传递数据的方法：在子组件中创建并发射一个自定义事件，并且在父组件中监听该事件，获取事件中的数据，并且将其渲染到页面上。
兄弟组件传值
Web Components 中，兄弟组件之间传递数据也是一个比较普遍的场景。在这种情况下，我们可以通过父组件作为中间人来完成数据的传递。下面依然以一个简单的例子来说明，假设我们有两个兄弟组件 component-a 和 component-b，我们需要在 component-a 中点击一个按钮时将一个字符串 "Hello" 传递给 component-b：
-- -------------------- ---- -------
---- ---------------- ---
----------
-----
---------- --------------
---------------------------
---------------------------
------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
-------------- - ---
-
--- ------------- -
-------------- - ----
--------------------------------------------------------------------- ----------------
-
--- ---------- -
------ ---------------
-
-
----------------------------------------- -----------------
---------
---- ----------- ---
----------
------------- -----------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
----------------------------------------------------------------- - -- -
---------------------- ----------------------- -
-------- -----
--------- -----
------- ------ --------
----
---
-
-
------------------------------------ ------------
---------
---- ----------- ---
----------
-------
-----------
--------
----- ---------- ------- ----------- -
------ --- -------------------- -
------ -------------
-
------------- -
--------
----- -------- - ------------------------------------------------
----- --------------- - -----------------
------------------------ ------------------------------------------------------
-
------------------------------ --------- --------- -
-- ----- --- ----------- -
---------------------------------------------- - ---------
-
-
-
------------------------------------ ------------
---------
---- --------- ---
--------- -------------------------------
-----
---------- --------------
---------------------------
---------------------------
------
-----------
--------- --------------------------
------------- -----------
-----------
--------- --------------------------
-----
------------- ------
-------
------
-----------在上面的代码中，我们在 component-a 中创建了一个 click 事件，并且在事件处理程序中创建了一个自定义事件 greeting，将其中的字符串 "Hello" 封装在事件对象的 detail.text 中，并且发射出去。在 parent-component 中，我们监听了 component-a 发出的 greeting 事件，然后将其中的字符串值传递给 component-b，并且在 component-b 中通过属性 greeting 将其渲染到页面上。
通过上面这个例子，我们可以学习到兄弟组件传递数据的方法：通过父组件作为中间人，将数据从一个组件传递给另一个组件，并且在目标组件中通过属性来监听中间人的变化。
结语
本文探究了 Web Components 中常用的组件传值技巧：父子组件传值、子父组件传值、兄弟组件传值，并且提供了详细的示例代码和指导意义。希望读者可以通过学习本文，更加深入地理解Web Components 中的组件传值机制，提高自己的Web 开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83034e46428fe9ee603df
