Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁面顯示的組件是根據(jù)角色變化而變化的，在這個(gè)項(xiàng)目中我使用了elementplus的el-tabs來動(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語法糖時(shí)候我要引入組件只需要在components中定義組件就好了，如下圖
然后就可以快樂得在component組件的:is中遍歷進(jìn)組件的名稱就好了；但是在使用了setup語法糖之后，沒有了components選項(xiàng)，我突然就有點(diǎn)無從下手，在vue3官網(wǎng)中我看到了setup掛載組件的用法
那就照著官網(wǎng)照貓畫虎吧，于是就寫下了如下代碼
<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一看，這東西怎么沒掛上啊
啥也沒有！
沒辦法，再仔細(xì)看看官網(wǎng)文檔吧
官網(wǎng)中明確說明組件是通過變量引用而不是基于字符串組件名注冊(cè)的，然而我在數(shù)據(jù)庫中取出來的組件名必然是字符串，這可咋整，只能用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é)果，moudle_id內(nèi)容也變成組件了
問題解決
到此這篇關(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中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟
這篇文章主要介紹了vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟,文中通過代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下2024-07-07
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
Vue結(jié)合openlayers按照經(jīng)緯度坐標(biāo)實(shí)現(xiàn)錨地標(biāo)記及繪制多邊形區(qū)域
OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制2022-09-09
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請(qǐng)求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了vue-router鉤子執(zhí)行順序示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題
這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07