Vue 组件导入答案

【问题标题】：Vue Component ImportVue 组件导入
【发布时间】：2018-08-03 09:32:49
【问题描述】：

我知道这个问题已经被问过好几次了，不幸的是我无法弄清楚。我的问题是如何一次性从一个目录中导入所有 vue 单文件组件。让我说清楚..

假设我有一个名为 Add/Items 的目录，我在其中存储了所有 vue 组件，ItemA、ItemB 等等。我想将这些组件导入到位于Add 目录外的Add.vue 文件中。

我已经尝试过这些方法（在Add.vue 文件脚本部分）.. 方法一：

import ItemA from './Add/Items/ItemA'
import ItemB from './Add/Items/ItemB'

export default {
  components: {
   'item-a': ItemA,
   'item-b': ItemB
  }
}

它适用于<item-a/> 以及<component is="item-a"/>

但是下面的方法不行。

方法#2

这里我在Add/Items目录下创建了一个名为index.js的文件，下面的sn-p就写在这里

import itemA from './ItemA'
import ItemB from './ItemB'

export default {
  ItemA,
  ItemB
}

在Add.vue 文件中

import items from './Add/Items'

export default {
  components: {
    items
  }
}

它既不适用于<item-a/>，也不适用于<component is="item-a"/>。有什么我想念的吗？顺便说一句，<component :is="item-a"/> 是我的首选。

提前致谢。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

在你的问题的最后一个例子中（Add.vue）你会得到这个（这不是你想要的）：

  components: {
    items: {
      ItemA,
      ItemB
    }
  }

您只需要使用 spread(...) 运算符或直接将项目分配给components：

export default {
  components: {
    ...items
  }
}

或者这个：

export default {
  components: items
}

【讨论】：