Comment restituer manuellement des composants sur des éléments spécifiés dans Vue3

Convertir des composants en éléments personnalisés

Documentation : Vue et composants Web | Vue.js (vuejs.org)

Vue fournit un bon support pour les composants Web. Les composants peuvent être convertis en éléments personnalisés à l'aide de defineCustomElement. Vous pouvez ensuite l'insérer librement dans le nœud DOM. 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 '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 将会失效，因为它们并不属于原先的应用程序。

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

De plus, il est possible de convertir un SFC (Single File Component) en un élément personnalisé.

🎜Documentation : sfc comme élément personnalisé🎜rrreee

🎜Il convient de noter que defineCustomElement utilisera Shadow DOM pour restituer l'élément. Cette méthode entraînera une isolation des styles et les styles externes ne pourront pas s'appliquer à l'intérieur du composant. Si vous utilisez une bibliothèque de composants ou si vous comptez sur certains styles externes, pensez à réimporter ces styles. 🎜🎜🎜Plusieurs instances d'application de Vue🎜🎜 N'oubliez pas que lors de la création du projet, nous avons utilisé createApp pour créer une instance App, puis nous l'avons montée sur # app. En fait, plusieurs instances d'application, c'est-à-dire plusieurs applications Vue, peuvent exister simultanément dans un environnement DOM. 🎜🎜En utilisant cela, vous pouvez créer à nouveau une instance d'application, puis la monter sur un élément DOM spécifique. 🎜rrreee🎜De cette façon, le composant peut s'afficher normalement. Les éléments provide et inject du composant ne seront pas valides car ils n'appartiennent pas à l'application d'origine. 🎜<blockquote>🎜Comment communiquer entre composants ? Vous pouvez utiliser des événements personnalisés ou createEventHook | VueUse. De plus, vous pouvez également profiter du principe de réactivité de Vue3, utiliser <code>ref ou reactive pour créer un objet réactif distinct, puis les référencer dans différents composants pour obtenir la bidirectionnalité. synchronisation des données. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!