首页 新闻 搜索 专区 学院

Vue批量导入

0
悬赏园豆:20 [待解决问题]

现在有一批组件,都是弹窗,挂在页面上,如果挨个写,肯定会写很多,然后我现在的需求就是希望可以批量导入组件。然后我js已经写好了,console.log可以获取到组件了,就是吧,不知道怎么写,才能挂在页面上。

<template>
  <div><!-- 就是这块不知道咋写 -->
    <component :is="item" v-for="item in dialogs" :key="item.name" />
  </div>
</template>
<script>

import path from 'path'
const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)// param1:路径;param2: 是否搜索子文件夹:param3: 文件类型
const dialogs = {}
// 组件导入
files.keys().forEach((key) => {
  const name = path.basename(key, '.vue')
  /**
    * path.basename获取vue文件名,也可以用正则表达式匹配
    * key.replace(/^\.\/(.*)\.\w+$/, '$1')
    **/
  dialogs[name] = files(key).default || files(key)
})
console.log(dialogs)//这块没问题,已经获取到组件了
export default {
  name: 'Dialogs',
  components: dialogs//有人这块是这么写的,还有人是
/*
  components:{
...dialogs
}我不知道这两种区别是啥?莫非第二种可以还加别的组件?
*/
}
</script>

  <style lang="scss" scoped />

vue
echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:791
提问于:2022-08-05 08:58
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册