Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)

更新時(shí)間：2023年04月23日 10:24:43 作者：Fisschl

本文主要介紹了Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

將組件轉(zhuǎn)換為自定義元素

文檔：Vue 與 Web Components | Vue.js (vuejs.org)

Vue 對(duì) Web Components 提供了良好的支持?？梢允褂?code>defineCustomElement將組件轉(zhuǎn)換為自定義元素。隨后就可以自由插入到 DOM 節(jié)點(diǎn)中了。

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 這里是同平常一樣的 Vue 組件選項(xiàng)
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement 特有的：注入進(jìn) shadow root 的 CSS
  styles: [`/* inlined css */`]
})

// 注冊(cè)自定義元素
// 注冊(cè)之后，所有此頁(yè)面中的 `<my-vue-element>` 標(biāo)簽
// 都會(huì)被升級(jí)
customElements.define('my-vue-element', MyVueElement)

// 你也可以編程式地實(shí)例化元素：
// （必須在注冊(cè)之后）
document.body.appendChild(
  new MyVueElement({
    // 初始化 props（可選）
  })
)

此外，還可以將一個(gè) SFC （單文件組件）轉(zhuǎn)換為自定義元素。

文檔：sfc as custom element

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

console.log(Example.styles) // ["/* 內(nèi)聯(lián) css */"]

// 轉(zhuǎn)換為自定義元素構(gòu)造器
const ExampleElement = defineCustomElement(Example)

// 注冊(cè)
customElements.define('my-example', ExampleElement)

值得注意的是，defineCustomElement會(huì)使用 Shadow DOM 渲染元素。而這種方式會(huì)造成樣式隔離，外部的樣式將無(wú)法作用到組件內(nèi)部。如果您使用了組件庫(kù)，或依賴于某些外部樣式，記得將這些樣式重復(fù)導(dǎo)入一次。

Vue 的多應(yīng)用實(shí)例

還記得在創(chuàng)建項(xiàng)目時(shí)，我們使用了createApp創(chuàng)建一個(gè)App實(shí)例，然后將它掛載到了#app里。實(shí)際上，在一個(gè) DOM 環(huán)境中可以同時(shí)存在多個(gè) App 實(shí)例，也就是多個(gè) Vue 應(yīng)用。

利用這一點(diǎn)，可以再次創(chuàng)建一個(gè) App 實(shí)例，然后將它掛載到某個(gè)特定的 DOM 元素上。

import YouComponent from "./YouComponent.vue";  
  
// 創(chuàng)建一個(gè)新的 Vue 應(yīng)用  
const app = createApp(YouComponent);  
// 將應(yīng)用掛載到自定義的 DOM 元素上  
app.mount("#you-element");

這樣，組件就可以正常渲染了。但是組件的 provide，inject 會(huì)失效，因?yàn)樗⒉粚儆谠鹊膽?yīng)用了。

如何進(jìn)行組件之間的通信？可以使用自定義事件，或者 createEventHook | VueUse。此外，也可以利用 Vue3 的響應(yīng)性原理，使用ref或者reactive創(chuàng)建一個(gè)單獨(dú)的響應(yīng)性對(duì)象，然后在不同的組件中引用它們，就可以實(shí)現(xiàn)雙向的數(shù)據(jù)同步。

到此這篇關(guān)于Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 渲染組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: