Vue3의 지정된 요소에 구성 요소를 수동으로 렌더링하는 방법

구성 요소를 사용자 정의 요소로 변환

문서: Vue 및 웹 구성 요소 | Vue.js(vuejs.org)

Vue는 웹 구성 요소에 대한 우수한 지원을 제공합니다. defineCustomElement를 사용하여 구성요소를 맞춤 요소로 변환할 수 있습니다. 그런 다음 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

또한 SFC(Single File Component)를 사용자 정의 요소로 변환하는 것도 가능합니다.

🎜문서: sfc를 맞춤 요소로🎜rrreee

🎜 defineCustomElement가 Shadow DOM을 사용하여 요소를 렌더링한다는 점은 주목할 가치가 있습니다. 이 방법을 사용하면 스타일이 격리되어 외부 스타일을 구성 요소 내부에 적용할 수 없습니다. 구성 요소 라이브러리를 사용하거나 일부 외부 스타일을 사용하는 경우 해당 스타일을 다시 가져와야 합니다. 🎜🎜🎜Vue의 여러 애플리케이션 인스턴스🎜🎜 프로젝트를 생성할 때 createApp를 사용하여 App 인스턴스를 생성한 다음 이를 # app. 실제로 여러 App 인스턴스, 즉 여러 Vue 애플리케이션이 DOM 환경에 동시에 존재할 수 있습니다. 🎜🎜이를 사용하면 앱 인스턴스를 다시 생성한 다음 특정 DOM 요소에 마운트할 수 있습니다. 🎜rrreee🎜이렇게 하면 구성 요소가 정상적으로 렌더링될 수 있습니다. 구성 요소의 제공 및 주입은 원래 애플리케이션에 속하지 않기 때문에 유효하지 않습니다. 🎜<blockquote>🎜구성요소 간 통신은 어떻게 하나요? 사용자 정의 이벤트를 사용하거나 createEventHook | 또한 Vue3의 응답성 원칙을 활용하고 <code>ref 또는 reactive를 사용하여 별도의 반응형 개체를 만든 다음 이를 다른 구성 요소에서 참조하여 양방향성을 달성할 수도 있습니다. 데이터 동기화. 🎜🎜

위 내용은 Vue3의 지정된 요소에 구성 요소를 수동으로 렌더링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!