javascript - 无法导入/导出 vuejs 组件

Question

我有一个这样的文件夹。

VueTree
  components
    Classic.vue
    Modern.vue
  index.js

Classic 和 Modern 是具有template、export default{} 和style 的简单组件。 我在 index.js 中将两者都调用为:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree= {
  Classic ,
  Modern 
}

export default VueTree

因此，当我将此模块导入为:

import {Classic , Modern } from '../../modules/VueTree/index.js'

我收到这个错误

未知的自定义元素:- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我的组件中有 name: "Classic"，我使用 components: { Classic }, 将其包含在当前文件中，但我得到了同样的错误。

只有当我只导出一个组件时它才有效:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'
export default Classic

这将起作用并包括经典，但我不能像在本例中看到的那样导出它们 https://github.com/greyby/vue-spinner/blob/master/src/index.js

Answer 1

您需要使用 export 进行命名导出，而不是 export default:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

export {
  Classic ,
  Modern 
}

参见:https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export