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

将组件转换为自定义元素

文档: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(&#39;my-vue-element&#39;, MyVueElement)

// 你也可以编程式地实例化元素:
// (必须在注册之后)
document.body.appendChild(
  new MyVueElement({
    // 初始化 props(可选)
  })
)

此外,还可以将一个 SFC (单文件组件)转换为自定义元素。

文档:sfc as custom element

import { defineCustomElement } from &#39;vue&#39;
import Example from &#39;./Example.ce.vue&#39;

console.log(Example.styles) // ["/* 内联 css */"]

// 转换为自定义元素构造器
const ExampleElement = defineCustomElement(Example)

// 注册
customElements.define(&#39;my-example&#39;, 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 将会失效,因为它们并不属于原先的应用程序。

如何进行组件之间的通信?可以使用自定义事件,或者 createEventHook | VueUse。 此外,也可以利用 Vue3 的响应性原理,使用ref或者reactive创建一个单独的响应性对象,然后在不同的组件中引用它们,就可以实现双向的数据同步。

以上就是Vue3怎么将组件手动渲染到指定元素中的详细内容,更多请关注www.sxiaw.com其它相关文章!