Question

我知道这个问题已经问过几次了，很遗憾，我无法弄清楚。我的问题是如何一次性从目录中导入所有vue单个文件组件。我明白了。

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

我已经尝试了这些方法（在Add.vue文件脚本部分中）。方法1：

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

在这里我在index.js目录中创建了一个名为Add/Items的文件，并在其中写入了以下代码段

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"/>是我的偏好。

谢谢。

Answer 1

在您问题的最后一个示例（Add.vue）中，您会得到以下内容（不是您想要的）：

  components: {
    items: {
      ItemA,
      ItemB
    }
  }

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

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

或者这个：

export default {
  components: items
}

Vue组件导入

1 个答案: