一、問(wèn)題

在VUE應(yīng)用中，經(jīng)常會(huì)使用一些非vue實(shí)現(xiàn)的js庫(kù)，這些js庫(kù)可能要求外部傳入一些界面DOM節(jié)點(diǎn)，但該界面通常是vue組件定義，無(wú)法直接傳遞給js庫(kù)，那么vue組件如何生成DOM節(jié)點(diǎn)傳遞給js庫(kù)？比如在開(kāi)發(fā)地圖應(yīng)用中，地圖引擎通常是純js庫(kù)，當(dāng)點(diǎn)擊地圖上的信息點(diǎn)彈出信息框時(shí)，地圖引擎庫(kù)要求傳入信息框的dom節(jié)點(diǎn)，通常該信息框由vue組件實(shí)現(xiàn)，無(wú)法直接傳遞給地圖引擎庫(kù)，需將vue組件手動(dòng)生成dom節(jié)點(diǎn)，才能傳遞給地圖引擎。

二、手動(dòng)掛載vue組件

vue組件手動(dòng)生成dom節(jié)點(diǎn)主要通過(guò)以下兩個(gè)函數(shù)：

（1）createVNode函數(shù):由組件對(duì)象生成一個(gè)虛擬節(jié)點(diǎn)。

（2）render函數(shù)：把一個(gè)虛擬節(jié)點(diǎn)掛載到一個(gè)dom節(jié)點(diǎn)上。

因此要把vue組件掛載在dom節(jié)點(diǎn)可以如下調(diào)用:

import  myPopupComp from "./myPopupComp .vue"; //我們寫(xiě)的組件
import {createVNode,render,getCurrentInstance} from "vue";
const parentNode=docuemnt.createElement("div");
const vNode=createVNode(myPopupComp,{}/*組件要傳遞的參數(shù)*/);
const appContext=getCurrentInstance().appContext;/*獲取app的上下文，
注意：如果getCurrentInstance沒(méi)法返回當(dāng)前的組件實(shí)例，
可以將函數(shù)放到組件的setup中執(zhí)行，然后通過(guò)變量記錄該實(shí)例。
也可以在主函數(shù)createApp時(shí)，把a(bǔ)pp傳遞進(jìn)來(lái)。*/
vNode.appContext=appContext;/*將vue組件關(guān)聯(lián)到當(dāng)前app下管理，
如果這個(gè)appContext是單獨(dú)創(chuàng)建，那么原來(lái)app相關(guān)的資源將不能用，
如：router，全局組件等等，都需要重新創(chuàng)建。*/
render(vNode,parentNode);//將組件掛載到parentNode下。

于是parentNode就包含了組件生成的節(jié)點(diǎn)，這個(gè)parentNode就可以?huà)燧d到地圖的popup組件上。

注意：掛載時(shí)，需要將當(dāng)前app的appContext傳遞給組件，否則組件不能使用當(dāng)前app的資源，包括路由、界面框架、狀態(tài)等全局組件，無(wú)法與當(dāng)前app交互。

三、卸載vue組件

（1）手動(dòng)卸載組件

手動(dòng)掛載到dom節(jié)點(diǎn)的vue組件不會(huì)自動(dòng)卸載，可能會(huì)造成內(nèi)存泄漏（是否泄漏具體沒(méi)研究過(guò)，但如果沒(méi)有卸載，組件的onUnmounted不會(huì)被調(diào)用，導(dǎo)致有些內(nèi)部的依賴(lài)該回調(diào)的功能出現(xiàn)問(wèn)題）。卸載組件沒(méi)有單獨(dú)的方法，復(fù)用render方法：

render(null,parentNode);

（2）自動(dòng)卸載組件

在某些情況下，我們想隨著dom node的生命周期結(jié)束，一起自動(dòng)卸載組件，如：地圖的popup組件的生命周期是由地圖管理的，地圖刪除popup節(jié)點(diǎn)時(shí)，刪除對(duì)應(yīng)的vue組件，可采用如下方式，增加對(duì)組件節(jié)點(diǎn)被刪除事件的監(jiān)聽(tīng)，在刪除時(shí)，卸載vue組件：

parentNode.addEventListener("DOMNodeRemovedFromDocument",()=>render(null,parentNode));

四、與用createApp掛載的區(qū)別

將vue組件掛載到dom節(jié)點(diǎn)還有另一種方法，就是利用createApp直接創(chuàng)建一個(gè)app,然后mount到一個(gè)dom節(jié)點(diǎn)上。類(lèi)似如下代碼：

import {createApp} from "vue";
import myComp from "./myComp.vue"; //我的組件

//待掛載的節(jié)點(diǎn)
const domNode=document.CreateElement("div");
//創(chuàng)建app
const app=createApp(myComp,{/*組件的參數(shù)*/});
//將app掛載到節(jié)點(diǎn)上
app.mount(domNode);

這種方法的vue組件運(yùn)行在獨(dú)立的app下，無(wú)法使用主app所注冊(cè)的路由、狀態(tài)、界面框架等全局資源，如果要使用，需要重新建立主app所創(chuàng)建的環(huán)境。所以這種方式并不適合我們的使用場(chǎng)景。

五、小結(jié)

在Vue應(yīng)用中，如果需要將某個(gè)vue組件提供給其他不支持vue的js框架，可采用此方法將vue組件生成的dom節(jié)點(diǎn)傳遞給框架，同時(shí)保持該vue組件可與當(dāng)前應(yīng)用交互。

到此這篇關(guān)于手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法的文章就介紹到這了,更多相關(guān)Vue手動(dòng)掛載到DOM節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論