随着 Web 开发技术的不断更新，越来越多的前端开发者开始使用 Custom Elements 来创建自定义组件。Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，这些元素可以像普通 HTML 元素一样使用。在 Custom Elements 中，ref 和 $emit 是两个常见的 API，它们可以帮助我们更好地管理组件的状态和事件。
ref
ref 是 Custom Elements 中用于引用组件内部元素的 API。使用 ref 可以让我们在组件内部轻松地访问和操作子元素，而不需要使用复杂的 DOM 操作。下面是一个简单的示例：
-------------- ---- ---------------------- ---------------
在上面的代码中，我们定义了一个名为 container 的 div 元素，并使用 ref 属性将其引用。在组件内部，我们可以使用 this.$refs.container 访问这个元素，并对它进行操作。例如，我们可以在组件的 created 钩子函数中设置 container 元素的样式：
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------
-
--------- -
------------------------------------------ - ------
-
--- ------- -
------ -
---------- ---------------------------------------
--
-
-在上面的代码中，我们通过 get $refs 方法返回了一个包含所有 ref 元素的对象。在 created 钩子函数中，我们可以轻松地访问 container 元素，并设置它的样式。
$emit
$emit 是 Custom Elements 中用于触发事件的 API。使用 $emit 可以让我们在组件内部轻松地触发自定义事件，并在父组件中监听这些事件。下面是一个简单的示例：
-----------------------------
在上面的代码中，我们定义了一个名为 my-component 的自定义元素。在组件内部，我们可以使用 $emit 方法触发一个名为 my-event 的自定义事件：
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------
-
--------- -
-----------------------
-
----------- ----- -
----- ----- - --- ----------------- -
-------- -----
------- ----
---
--------------------------
-
-在上面的代码中，我们通过 $emit 方法触发了一个名为 my-event 的自定义事件，并传递了一个可选的数据参数。在 $emit 方法内部，我们创建了一个 CustomEvent 对象，并使用 dispatchEvent 方法触发了这个事件。在父组件中，我们可以监听这个事件：
----- ----------- - --------------------------------------- ---------------------------------------- -- -- - --------------------- ------------ ---
在上面的代码中，我们使用 addEventListener 方法监听了 my-event 事件，并在事件触发时打印了一条消息。
总结
通过使用 ref 和 $emit，我们可以更好地管理 Custom Elements 中的状态和事件。使用 ref 可以让我们轻松地访问和操作子元素，而不需要使用复杂的 DOM 操作。使用 $emit 可以让我们在组件内部轻松地触发自定义事件，并在父组件中监听这些事件。在实际开发中，我们可以结合这两个 API，创建更加灵活和易于维护的 Custom Elements 组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656d430fd2f5e1655d5903ce