现在有一批组件，都是弹窗，挂在页面上，如果挨个写，肯定会写很多，然后我现在的需求就是希望可以批量导入组件。然后我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 />