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中调用HTTP请求的详细步骤
这篇文章主要介绍了vue中调用HTTP请求的详细步骤,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定帮助,需要的朋友可以参考下
2024-07-07
vue.js的computed,filter,get,set的用法及区别详解
下面小编就为大家分享一篇vue.js的computed,filter,get,set的用法及区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
在vue3项目中给页面添加水印的实现方法
这篇文章主要给大家介绍一下在vue3项目中添加水印的实现方法,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08
Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制
2022-09-09
vue3 $attrs和inheritAttrs的用法说明
这篇文章主要介绍了vue3 $attrs和inheritAttrs的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解如何在vue中封装axios请求并集中管理
这篇文章主要为大家详细介绍了如何在vue中封装axios请求并集中管理,w文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
2023-10-10
vue瀑布流组件实现上拉加载更多
这篇文章主要为大家详细介绍了vue瀑布流组件实现上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
vue3如何添加eslint校验(eslint-plugin-vue)
这篇文章主要介绍了vue3如何添加eslint校验(eslint-plugin-vue),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
vue-router钩子执行顺序示例解析
这篇文章主要为大家介绍了vue-router钩子执行顺序示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue使用splice()删除数组中的一个数据弹出窗口提示问题
这篇文章主要介绍了vue使用splice()删除数组中的一个数据弹出窗口提示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07

Vue3的setup在el-tab中动态加载组件的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具