--- URL: "/zh-CN/blog/2026-02/Vue-Web-Components.html" LLMS_URL: "/zh-CN/blog/2026-02/Vue-Web-Components.md" lastUpdated: true commentabled: true recommended: true title: "Vue3 与 Web Components 集成" description: "Vue 3 与 Web Components 集成" date: pageClass: "blog-page-class" cover: "/covers/html5.svg" --- --- lastUpdated: true commentabled: true recommended: true title: Vue3 与 Web Components 集成 description: Vue 3 与 Web Components 集成 date: 2026-02-04 11:30:00 pageClass: blog-page-class cover: /covers/html5.svg --- Vue 3 与 Web Components 的集成非常方便。Web Components 是一组浏览器原生技术，允许开发者创建可重用的自定义 HTML 元素。Vue 3 提供了对 Web Components 的良好支持，可以将 Vue 组件封装为 Web Components，或者在 Vue 项目中使用外部的 Web Components。 ## 在 Vue 3 中使用 Web Components ## Vue 3 可以直接使用外部的 Web Components，只需确保浏览器支持 Web Components 技术（如 Custom Elements 和 Shadow DOM）。 ### 示例：使用外部 Web Components ### 假设有一个自定义的 Web Components ``，可以在 Vue 3 中直接使用： :::demo ```vue ``` ::: **注意事项**： - 属性传递：Vue 会将属性（如 `:title="title"`）和事件（如 `@click="handleClick"`）传递给 Web Components。 - 兼容性：确保浏览器支持 Web Components，或者使用 polyfill。 ## 将 Vue 组件封装为 Web Components ## Vue 3 提供了 `defineCustomElement` 方法，可以将 Vue 组件封装为 Web Components。 ### 示例：将 Vue 组件封装为 Web Components ### ```vue:MyButton.ce.vue ``` ```javascript:main.ts import { defineCustomElement } from 'vue'; import MyButton from './MyButton.ce.vue'; // 将 Vue 组件转换为 Web Components const MyButtonElement = defineCustomElement(MyButton); // 注册自定义元素 customElements.define('my-button', MyButtonElement); ``` 使用封装后的 Web Components ```html Vue Web Components 点击我 ``` ## Vue 组件与 Web Components 的区别 ## | 特性 | Vue 组件 | Web Components | | :-----------: | :----: | :----: | | 技术栈 | Vue 生态系统 | 浏览器原生技术 | | 封装性 | 支持作用域样式和逻辑封装 | 使用 Shadow DOM 实现样式和逻辑封装 | | 跨框架使用 | 仅限于 Vue 项目 | 可以在任何框架或原生 HTML 中使用 | | 性能 | 依赖 Vue 运行时 | 原生支持，性能更高 | | 兼容性 | 需要 Vue 运行时 | 需要浏览器支持或 polyfill | ## 在 Vue 3 中使用 Shadow DOM ## Web Components 通常与 Shadow DOM 结合使用，以实现样式和逻辑的封装。 Vue 3 支持在 Web Components 中使用 Shadow DOM。 ### 示例：使用 Shadow DOM ### ```vue:MyButton.ce.vue ``` ```javascript:main.ts import { defineCustomElement } from 'vue'; import MyButton from './MyButton.ce.vue'; // 将 Vue 组件转换为 Web Components，并启用 Shadow DOM const MyButtonElement = defineCustomElement({ ...MyButton, styles: [MyButton.styles], // 将样式注入 Shadow DOM }); // 注册自定义元素 customElements.define('my-button', MyButtonElement); ``` ## Vue 3 与 Web Components 的事件通信 ## Vue 组件和 Web Components 之间可以通过自定义事件进行通信。 ### 示例：Vue 组件监听 Web Components 事件 ### :::demo ```vue ``` ::: ### 示例：Web Components 触发自定义事件 ### ```vue:MyButton.ce.vue ``` ## Vue 3 与 Web Components 的样式隔离 ## Web Components 使用 Shadow DOM 实现样式隔离，Vue 3 的样式默认不会影响 Web Components，反之亦然。 ### 示例：样式隔离 ### ```vue ``` - Vue 组件的样式不会影响 Web Components 的内部样式。 - Web Components 的样式也不会影响 Vue 组件。 ## 工具支持 ## - Vite：Vite 对 Web Components 提供了开箱即用的支持。 - Vue CLI：Vue CLI 项目可以通过配置 `vue.config.js` 支持 Web Components。 ## 总结 ## - Vue 3 可以轻松集成 Web Components，既可以使用外部的 Web Components，也可以将 Vue 组件封装为 Web Components。 - 使用 `defineCustomElement` 方法可以将 Vue 组件转换为 Web Components。 - Web Components 的 Shadow DOM 提供了样式和逻辑的封装，适合跨框架使用。 > 浏览器原生支持的组件化方案？Web Components深度解毒指南 > > Web Component 深度解析：构建原生可复用组件 Web Components 是一套由浏览器原生支持的 Web API，它允许开发者创建可重用、封装良好的定制 HTML 元素，从而实现组件化的前端开发模式。本文将深入探讨 Web Components 的核心 API 及其使用方式，并通过丰富的代码示例展示如何构建强大的自定义组件。 ## 什么是 Web Component？ ## Web Components 旨在解决代码复用和组件化管理的问题，它由三项主要技术组成： - *​​Custom Elements (自定义元素)*​​：允许开发者扩展 HTML 元素集合，通过定义新的标签来创建自定义组件 ​- *​Shadow DOM (影子 DOM)*​​：提供封装样式和结构的能力，使组件内部的 CSS 样式不会影响到外部环境，反之亦然 ​- *​HTML Templates (HTML 模板)*​​：使用 `