需求:有个表格,公用字段比较多,然后想吧差异字段提出来作为局部组件导入。
实现思路:
创建子文件夹,然后通过import批量引入,然后通过字符串动态匹配模板。
文件结构:
listItem
--subComponent1.vue
--subComponent2.vue
mainView.vue
mainView引入:
let modules = import.meta.globEager("./listItem/*.vue")
let components = {}
Object.values(modules).forEach((element: any) => {
components[element.default.name] = element.default
});
//componets里面就是{name:组件},
//curView就是ref变量
<component :is="curView"></component>
实现完了,说一下遇到的问题:
子组件完全没有js代码的情况下会引入失败了!!!
<template>
<el-table-column prop="win_info" label="标题" min-width="100">
</el-table-column>
</template>
<script lang="ts" setup name='LxsView'>
;//随便加一个分号就行,否则引入失败
</script>
<style lang="scss" scoped>
</style>