Vue3的setup在el-tab中动态加载组件的方法
更新时间：2022年11月18日 09:53:19 作者：BigFace123
公司某项目需求在页面显示的组件是根据角色变化而变化的，怎么实现这个效果呢，下面小编给大家介绍下Vue3的setup在el-tab中动态加载组件的方法,需要的朋友可以参考下
公司某项目需求在页面显示的组件是根据角色变化而变化的，在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件，如下图所示
<template>
<component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/>
</template>
数据内容大概是这样的
在未使用setup语法糖时候我要引入组件只需要在components中定义组件就好了，如下图
然后就可以快乐得在component组件的:is中遍历进组件的名称就好了；但是在使用了setup语法糖之后，没有了components选项，我突然就有点无从下手，在vue3官网中我看到了setup挂载组件的用法
那就照着官网照猫画虎吧，于是就写下了如下代码
<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>
然后发现不对劲，啥也不显示，进devtools一看，这东西怎么没挂上啊
啥也没有！
没办法，再仔细看看官网文档吧
官网中明确说明组件是通过变量引用而不是基于字符串组件名注册的，然而我在数据库中取出来的组件名必然是字符串，这可咋整，只能用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内容也变成组件了
问题解决
到此这篇关于Vue3的setup在el-tab中动态加载组件的文章就介绍到这了,更多相关vue3 setup动态加载组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解)，具有很好的参考价值，希望对大家有所帮助2018-03-03
这篇文章给大家介绍了vue实现轮播图的多种方式,文中给出了四种实现方式,并通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的朋友可以参考下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事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧2024-01-01
这篇文章主要介绍了Vue Element前端应用开发之开发环境的准备工作，对Vue感兴趣的同学，可以来学习一下2021-05-05
这篇文章主要介绍了VScode格式化ESlint方法(最全最好用方法),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧2023-10-10
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常快,下面这篇文章主要给大家介绍了Vue基础教程之条件渲染和列表渲染的相关资料,需要的朋友可以参考下2021-11-11
最新评论