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 '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或reactive建立一個單獨的響應性對象，然後在不同的元件中引用它們，就可以實現雙向的數據同步。

以上是Vue3怎麼將元件手動渲染到指定元素中的詳細內容。更多資訊請關注PHP中文網其他相關文章！