Vue3怎么將組件手動渲染到指定元素中

這篇文章主要介紹了Vue3怎么將組件手動渲染到指定元素中的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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('my-vue-element', 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怎么將組件手動渲染到指定元素中”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3怎么將組件手動渲染到指定元素中”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。