Vue3的setup在el-tab中動態(tài)加載組件的方法
公司某項目需求在頁面顯示的組件是根據(jù)角色變化而變化的，在這個項目中我使用了elementplus的el-tabs來動態(tài)的顯示這些組件，如下圖所示
<template>
<component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/>
</template>
數(shù)據(jù)內(nèi)容大概是這樣的
在未使用setup語法糖時候我要引入組件只需要在components中定義組件就好了，如下圖
然后就可以快樂得在component組件的:is中遍歷進組件的名稱就好了；但是在使用了setup語法糖之后，沒有了components選項，我突然就有點無從下手，在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)不對勁，啥也不顯示，進devtools一看，這東西怎么沒掛上啊
啥也沒有！
沒辦法，再仔細看看官網(wǎng)文檔吧
官網(wǎng)中明確說明組件是通過變量引用而不是基于字符串組件名注冊的，然而我在數(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)}
})
但是還是不行，瀏覽器報錯
難道import定義組件在這里面不行？那就試試defineAsyncComponent試試
OK，能看見了
查看打印結果，moudle_id內(nèi)容也變成組件了
問題解決
到此這篇關于Vue3的setup在el-tab中動態(tài)加載組件的文章就介紹到這了,更多相關vue3 setup動態(tài)加載組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家分享一篇在vue項目中引入highcharts圖表的方法(詳解)，具有很好的參考價值，希望對大家有所幫助2018-03-03
這篇文章給大家介紹了vue實現(xiàn)輪播圖的多種方式,文中給出了四種實現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,感興趣的朋友可以參考下2024-02-02
這篇文章主要介紹了vue中下載文件后無法打開的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
今天小編就為大家分享一篇對Vue.js之事件的綁定(v-on: 或者 @ )詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
elementPlus?的el-select在提示框關閉時自動彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關閉時自動彈出閉時自動彈出的問題,主要問題就是因為filterable屬性,根本解決方案是選中的時候讓他失去焦點?el-select有一個visible-change事件,下拉框出現(xiàn)/隱藏時觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01
Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作
這篇文章主要介紹了Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作，對Vue感興趣的同學，可以來學習一下2021-05-05
這篇文章主要介紹了VScode格式化ESlint方法(最全最好用方法),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
這篇文章主要介紹了vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
src/main.js是入口文件,主要作用是初始化vue實例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊的組件能夠被全局使用,本文通過實例代碼介紹vue項目中main.js的用法,感興趣的朋友一起看看吧2023-10-10
Vue會盡可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染。這么做會使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎教程之條件渲染和列表渲染的相關資料,需要的朋友可以參考下2021-11-11