Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁(yè)面顯示的組件是根據(jù)角色變化而變化的,在這個(gè)項(xiàng)目中我使用了elementplus的el-tabs來(lái)動(dòng)態(tài)的顯示這些組件,如下圖所示
<template> <component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/> </template>
數(shù)據(jù)內(nèi)容大概是這樣的
在未使用setup語(yǔ)法糖時(shí)候我要引入組件只需要在components中定義組件就好了,如下圖
然后就可以快樂(lè)得在component組件的:is中遍歷進(jìn)組件的名稱就好了;但是在使用了setup語(yǔ)法糖之后,沒(méi)有了components選項(xiàng),我突然就有點(diǎn)無(wú)從下手,在vue3官網(wǎng)中我看到了setup掛載組件的用法
那就照著官網(wǎng)照貓畫(huà)虎吧,于是就寫(xiě)下了如下代碼
<div> <el-tabs type="border-card"> <el-tab-pane v-for="page in pageList" :label="page.module_desc"> <componet :is="page.module_id"></component> </el-tabs> </div>
然后發(fā)現(xiàn)不對(duì)勁,啥也不顯示,進(jìn)devtools一看,這東西怎么沒(méi)掛上啊
啥也沒(méi)有!
沒(méi)辦法,再仔細(xì)看看官網(wǎng)文檔吧
官網(wǎng)中明確說(shuō)明組件是通過(guò)變量引用而不是基于字符串組件名注冊(cè)的,然而我在數(shù)據(jù)庫(kù)中取出來(lái)的組件名必然是字符串,這可咋整,只能用eval了唄
pageList.value= (await GetMainpageList(store.state.userid)).data .mpa(x=>{ return {module_desc:x.module_desc,module_id:eval(x.module_id)} })
但是還是不行,瀏覽器報(bào)錯(cuò)
難道import定義組件在這里面不行?那就試試defineAsyncComponent試試
OK,能看見(jiàn)了
查看打印結(jié)果,moudle_id內(nèi)容也變成組件了
問(wèn)題解決
到此這篇關(guān)于Vue3的setup在el-tab中動(dòng)態(tài)加載組件的文章就介紹到這了,更多相關(guān)vue3 setup動(dòng)態(tài)加載組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue項(xiàng)目中引入highcharts圖表的方法(詳解)
下面小編就為大家分享一篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助2018-03-03對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解
今天小編就為大家分享一篇對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問(wèn)題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問(wèn)題,主要問(wèn)題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01Vue Element前端應(yīng)用開(kāi)發(fā)之開(kāi)發(fā)環(huán)境的準(zhǔn)備工作
這篇文章主要介紹了Vue Element前端應(yīng)用開(kāi)發(fā)之開(kāi)發(fā)環(huán)境的準(zhǔn)備工作,對(duì)Vue感興趣的同學(xué),可以來(lái)學(xué)習(xí)一下2021-05-05vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問(wèn)題及解決
這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02