So rendern Sie Komponenten manuell in bestimmte Elemente in Vue3

Komponenten in benutzerdefinierte Elemente konvertieren

Dokumentation: Vue und Web Components |. Komponenten können mit defineCustomElement in benutzerdefinierte Elemente umgewandelt werden. Sie können es dann frei in den DOM-Knoten einfügen.

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（可选）
  })
)

Darüber hinaus ist es möglich, eine SFC (Single File Component) in ein benutzerdefiniertes Element umzuwandeln. defineCustomElement将组件转换为自定义元素。随后就可以自由插入到 DOM 节点中了。

import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'

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

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

// 注册
customElements.define('my-example', ExampleElement)

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

文档：sfc as custom element

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

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

Vue 的多应用实例

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

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

rrreee

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

如何进行组件之间的通信？可以使用自定义事件，或者 createEventHook | VueUse。 此外，也可以利用 Vue3 的响应性原理，使用ref或者reactive

Dokumentation: sfc als benutzerdefiniertes Element

rrreee

#🎜🎜#Es ist erwähnenswert, dass defineCustomElement Shadow DOM zum Rendern von Elementen verwendet. Diese Methode führt zu einer Stilisolierung und externe Stile können nicht auf das Innere der Komponente angewendet werden. Wenn Sie eine Komponentenbibliothek verwenden oder sich auf externe Stile verlassen, denken Sie daran, diese Stile erneut zu importieren. #🎜🎜##🎜🎜##🎜🎜#Mehrere Anwendungsinstanzen von Vue #🎜🎜##🎜🎜# Denken Sie daran, dass wir beim Erstellen des Projekts createApp verwendet haben, um eine App-Instanz und mounten Sie sie dann in <code>#app. Tatsächlich können mehrere App-Instanzen, also mehrere Vue-Anwendungen, gleichzeitig in einer DOM-Umgebung existieren. #🎜🎜##🎜🎜#Damit können Sie eine App-Instanz erneut erstellen und diese dann auf einem bestimmten DOM-Element bereitstellen. #🎜🎜#rrreee#🎜🎜#Auf diese Weise kann die Komponente normal gerendert werden. Provide und Inject der Komponente sind ungültig, da sie nicht zur ursprünglichen Anwendung gehören. #🎜🎜#

#🎜🎜#Wie kommuniziert man zwischen Komponenten? Sie können benutzerdefinierte Ereignisse verwenden oder VueUse erstellen. Darüber hinaus können Sie auch das Reaktionsprinzip von Vue3 nutzen, mit ref oder reactive ein separates reaktionsfähiges Objekt erstellen und diese dann in verschiedenen Komponenten referenzieren, um Bidirektionalität zu erreichen Datensynchronisation. #🎜🎜##🎜🎜#

Das obige ist der detaillierte Inhalt vonSo rendern Sie Komponenten manuell in bestimmte Elemente in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!