Vue3怎么将组件手动渲染到指定元素中

时间：2023-05-22 02:32

将组件转换为自定义元素

文档：Vue 与 Web Components | Vue.js (vuejs.org)

Vue 对 Web Components 提供了良好的支持。可以使用defineCustomElement将组件转换为自定义元素。随后就可以自由插入到 DOM 节点中了。

import { defineCustomElement } from 'vue'const MyVueElement = defineCustomElement({  // 这里是同平常一样的 Vue 组件选项  props: {},  emits: {},  template: `...`,  // defineCustomElement 特有的：注入进 shadow root 的 CSS  styles: [`/* inlined css */`]})// 注册自定义元素// 注册之后，所有此页面中的 `<my-vue-element>` 标签// 都会被升级customElements.define('my-vue-element', MyVueElement)// 你也可以编程式地实例化元素：// （必须在注册之后）document.body.appendChild(  new MyVueElement({    // 初始化 props（可选）  }))

此外，还可以将一个 SFC （单文件组件）转换为自定义元素。

文档：sfc as custom element

import { defineCustomElement } from 'vue'import Example from './Example.ce.vue'console.log(Example.styles) // ["/* 内联 css */"]// 转换为自定义元素构造器const ExampleElement = defineCustomElement(Example)// 注册customElements.define('my-example', ExampleElement)

值得注意的是，defineCustomElement会使用 Shadow DOM 渲染元素。而这种方式会造成样式隔离，外部的样式将无法作用到组件内部。如果您使用了组件库，或依赖于某些外部样式，记得将这些样式重复导入一次。

Vue 的多应用实例

还记得在创建项目时，我们使用了createApp创建一个App实例，然后将它挂载到了#app里。实际上，在一个 DOM 环境中可以同时存在多个 App 实例，也就是多个 Vue 应用。

利用这一点，可以再次创建一个 App 实例，然后将它挂载到某个特定的 DOM 元素上。

import YouComponent from "./YouComponent.vue";    // 创建一个新的 Vue 应用  const app = createApp(YouComponent);  // 将应用挂载到自定义的 DOM 元素上  app.mount("#you-element");

这样，组件就可以正常渲染了。组件的 provide 和 inject 将会失效，因为它们并不属于原先的应用程序。