Custom Elements 应用实录：从原生 JS 组件到 Vue 组件

前言

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

阅读全文

猜你喜欢

  • Kubernetes 创建 RBAC 权限控制的方法

    在 Kubernetes 群集中，我们必须谨慎地管理用户和服务帐户的访问权限。为了实现这一点，Kubernetes 提供了一种名为 Role-Based Access Control（RBAC）的访问...

    1 年前
  • uni-app 中使用 socket.io 实现消息实时推送

    简介 uni-app 是一款基于 Vue.js 的多端开发框架，可同时生成 Android、iOS 和 Web 等多个运行平台的应用。而 socket.io 则是一款用于实现实时、双向、事件驱动通信的...

    1 年前
  • TypeScript：如何处理类中 private 变量无法使用的问题？

    在 TypeScript 中，许多开发者会使用 private 修饰符来限制类中的变量和方法只能在自身类中使用。但有时，我们需要在类的外部使用这些私有变量，这时候，TypeScript 提供了一个工具...

    1 年前
  • 如何通过 Webpack 构建适合 SPA 应用的前端脚手架

    在现代化的 Web 开发中，Single Page Application (SPA) 已经成为了越来越受欢迎的开发模式。SPA 的优势包括快速响应、动态加载和交互性强。

    1 年前
  • Custom Elements 如何进行一些秒级响应操作

    在前端开发中，Custom Elements（自定义元素）是一个非常有用的技术，它可以帮助我们创建一个自定义的 HTML 元素，这个元素可以像其他内置 HTML 元素一样工作，拥有自己的属性、事件、方...

    1 年前
  • 如何使用 LESS 优化网页性能

    在前端开发过程中，如何优化网页性能一直是一个重要的议题。而使用 LESS 可以帮助我们实现更加高效的 CSS 编写方式，从而优化网页性能。在本文中，将详细介绍如何使用 LESS 优化网页性能，并提供实...

    1 年前
  • SSE 不支持 POST 请求的解决方法

    SSE 是 Server-Sent Events 的缩写，是一种基于长连接的服务器推送技术，可以实现服务端实时向客户端推送消息。然而，由于 SSE 的特性，它不支持 POST 请求。

    1 年前
  • 使用 Angular 和 WebSocket 实现双向通信

    什么是 WebSocket WebSocket 是一种协议，它允许客户端和服务器之间进行实时双向通信。这种通信是基于 TCP 协议的，这意味着它具有低延迟和高效的数据交换。

    1 年前
  • 如何给 Express.js 应用开启 gzip 压缩

    前言 在现代web应用中，压缩响应数据已成为一种标配，它可以显著提升应用的响应速度和性能。而gzip压缩则是一种最流行的压缩格式之一，在实际应用中表现卓越。Express.js是一种流行的Node.j...

    1 年前
  • 史上最详细 Fastify 框架教程（含 demo）

    Fastify 是一款高效、低开销、简单易用的 Node.js Web 框架。它的设计目标是为了提供快速构建高性能的 Web 应用程序和微服务的能力。它基于 Node.js 服务器和一组强大的扩展功能...

    1 年前
  • 解决 Web Components 在特定浏览器中样式错乱的 bug

    前言 Web Components 是一种新型的浏览器原生组件开发方式，通过结合自定义标签、Shadow DOM、HTML Templates 和 JavaScript，实现了组件的封装与重用。

    1 年前
  • Cypress 测试框架：使用 beforeEach、afterEach 钩子函数

    Cypress 是一个流行的前端测试框架，它具有易于使用的 API、高效的测试速度和实时重载功能，使得编写和运行测试用例变得高效简便。在编写测试用例时，我们通常需要一些复用的代码块，这时就可以用到 C...

    1 年前
  • 在 Deno 中如何使用 setTimeout 方法？

    在 Deno 中如何使用 setTimeout 方法？ 在前端开发中，setTimeout 方法被广泛使用。它是一个让 JavaScript 延时执行代码的方法，经常被用来实现一些延迟调用的需求，比如...

    1 年前
  • Redux 如何处理跨域请求及响应

    跨域请求的问题在前端开发中是非常常见的，主要是因为同源策略的限制。当我们使用 Redux 进行状态管理时，也会遇到跨域请求的问题。本文将介绍 Redux 如何处理跨域请求及响应，详细探讨其原因，并提供...

    1 年前
  • CSS Flexbox 布局中 flex-direction 详解

    CSS Flexbox 布局是一种基于弹性盒子模型的布局方式，它可以非常方便地实现各种复杂的页面布局。其中，flex-direction 属性是控制元素排列方向的重要属性之一。

    1 年前
  • 如何使用 ES7 中的 Array.prototype.find 方法和 Array.prototype.findIndex 方法快速查找数组元素

    在 JavaScript 编程中，处理数组是一项经常发生的任务。当我们需要查找数组元素时，可以使用 JavaScript 语言自带的 Array.prototype.find 方法和 Array.pr...

    1 年前
  • 解决 ES6 中使用解构赋值时遇到的问题

    前言 ES6 在前端领域中已经广泛应用，其带来的箭头函数、类、循环语句等新特性已经改变了我们的代码书写方式。其中解构赋值是 ES6 中一个非常方便的语法，它可以使我们更快地从对象或数组中提取出需要的值...

    1 年前
  • Sequelize 与 Node.js 结合实现高性能 ORM 框架的实战

    什么是 Sequelize？ Sequelize 是一款基于 Node.js 的 ORM 框架，它提供了对多种 SQL 数据库的支持，包括 MySQL、PostgreSQL、SQLite 和 MSSQ...

    1 年前
  • 使用 Vue.js 创建 RESTful API 前端页面的技巧和经验分享

    随着 RESTful API 的流行，越来越多的前端开发人员开始使用它来构建自己的应用程序。Vue.js 是一种流行的 JavaScript 框架，它具有轻量级和易用性的优势，使其成为前端开发人员的首...

    1 年前
  • webpack + babel + ES2015（三）

    前言 首先，本文是webpack + babel + ES2015系列文章的第三篇，希望大家已经熟悉了Webpack以及Babel的基础使用。 本篇文章将继续深入探讨Webpack+ES2015的应用...

    1 年前

相关推荐

    暂无文章