前言
Custom Elements 是 Web Components 标准的一部分，可用于创建可重用的自定义元素。它们允许你创建具有自定义行为的新 HTML 标签。Custom Elements 允许您扩展浏览器标签与元素，以实现定制的交互和功能。Custom Elements 的综合应用可以帮助前端开发者解决很多问题。在这篇文章中，我们将从原生 JS 组件开始，逐步讲解如何使用 Custom Elements，最后展示到 Vue 组件的示例。
原生 JS 组件
原生 JS 组件是使用原生 JS 创造一个高度可重用的模块，它可以被其他模块调用。下面是一个使用原生 JS 组件实现的可重用的模态框组件。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
------ -
-------- ------
--------- ------
----- --
---- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- --
-
--------------- -
-------- ------
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ ------
---------- ----
----------------- -----
----------- -------
-------------- -----
----------- - ---- ---- - ------- -- -- -----
-------- -----
-
------------- -
--------- ---------
---- -----
------ -----
---------- -----
------- --------
-
--------
---- --------------
---- -----------------------
----- -----------------------------
-------------
------
------
--
-
------------------- -
------------------------------------------------------------------------ -- -- -
--------------
---
-
-
--------------------------------- ---------模态框组件是一种常见的 UI 元素，它通常都有自己的样式和交互，所以我们可以轻松地把这个模态框组件打包为一个模块，并供其他模块调用。下面是一些基本的标签使用方法：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ----- --- ------------------
------- --------------------------
-------
------
------- ---------------------- --------------
----------
--------- ----------
---------- -- -- ----------
---- ------------------------------------- ---------------- -------
-----------
--------
----------------------------------------------------------------- -- -- -
----- ----- - -----------------------------------
---------------------------------
---
---------
-------
-------Vue 组件
现在我们尝试将上述代码拓展为 Vue 组件。Vue 组件与原生 JS 组件有一些不同之处，在组件内部 Reactivity、Lifecycle Hooks 等都是需要考虑的因素。
-- -------------------- ---- -------
----------
---- --------------
---- -----------------------
----- -----------------------------
-------------
------
------
-----------
--------
------ ------- -
----- ----------
--------- -
----------------------------------------------------------------- -- -- -
--------------------
---
------------------------------------
--
--------------- -
------------------------------------
-
-
---------
------ -------
------ -
-------- ------
--------- ------
----- --
---- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- --
-
--------------- -
-------- ------
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ ------
---------- ----
----------------- -----
----------- -------
-------------- -----
----------- - ---- ---- - ------- -- -- -----
-------- -----
-
------------- -
--------- ---------
---- -----
------ -----
---------- -----
------- --------
-
--------这是 Vue 组件的实现方式，需要注意几点：
- 模态框组件的 HTML 模板被封装在单独的 .vue 文件中；
- 在 mounted 钩子函数中绑定事件，确保在模态框组件被渲染到 DOM 中后再绑定事件；
- 在 beforeDestroy 钩子函数中，移除模态框组件以避免在组件被销毁时出现任何问题；
- 父组件应该监听子组件上的 close 事件，然后在父组件中处理任何必要的逻辑。
-- -------------------- ---- -------
----------
-----
------- -------------- - ---------- --------------
--------- ------------- -------------- - -------
--------- ----------
---------- -- -- ----------
---- ------------------------------------- ---------------- -------
-----------
------
-----------
--------
------ ------- ---- ----------------
------ ------- -
----------- -
-------
--
------ -
------ -
------- -----
--
-
-
---------在父组件中使用 MyModal 组件的方法与常规的 Vue 组件相同。最终的效果如下：
总结
在本文中，我们学习了如何使用 Custom Elements 实现一个原生 JS 的自定义组件，然后我们解释了如何将这个组件转化为 Vue 组件。Custom Elements 是创建可重用组件的绝佳工具，可以在你的 Vue 项目中调整和演示组件的功能。希望这篇文章可以帮助你更深入地理解 Custom Elements，并希望你能在你的项目中广泛使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d34711b5eee0b525ad57ed