欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法

 更新時(shí)間:2022年11月18日 09:53:19   作者:BigFace123  
公司某項(xiàng)目需求在頁面顯示的組件是根據(jù)角色變化而變化的,怎么實(shí)現(xiàn)這個(gè)效果呢,下面小編給大家介紹下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)中明確說明組件是通過變量引用而不是基于字符串組件名注冊的,然而我在數(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項(xiàng)目中引入highcharts圖表的方法(詳解)

    在vue項(xiàng)目中引入highcharts圖表的方法(詳解)

    下面小編就為大家分享一篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助
    2018-03-03
  • vue實(shí)現(xiàn)輪播圖的多種方式

    vue實(shí)現(xiàn)輪播圖的多種方式

    這篇文章給大家介紹了vue實(shí)現(xiàn)輪播圖的多種方式,文中給出了四種實(shí)現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下
    2024-02-02
  • vue中下載文件后無法打開的坑及解決

    vue中下載文件后無法打開的坑及解決

    這篇文章主要介紹了vue中下載文件后無法打開的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • 對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解

    對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解

    今天小編就為大家分享一篇對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決

    elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決

    這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問題,主要問題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧
    2024-01-01
  • Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作

    Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作

    這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作,對(duì)Vue感興趣的同學(xué),可以來學(xué)習(xí)一下
    2021-05-05
  • VScode格式化ESlint方法(最全最好用方法)

    VScode格式化ESlint方法(最全最好用方法)

    這篇文章主要介紹了VScode格式化ESlint方法(最全最好用方法),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決

    vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決

    這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue項(xiàng)目中main.js的用法

    vue項(xiàng)目中main.js的用法

    src/main.js是入口文件,主要作用是初始化vue實(shí)例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊的組件能夠被全局使用,本文通過實(shí)例代碼介紹vue項(xiàng)目中main.js的用法,感興趣的朋友一起看看吧
    2023-10-10
  • Vue基礎(chǔ)教程之條件渲染和列表渲染

    Vue基礎(chǔ)教程之條件渲染和列表渲染

    Vue會(huì)盡可能高效地渲染元素,通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做會(huì)使Vue變得非???下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下
    2021-11-11

最新評(píng)論