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

Answer 2

你的设置很好。

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

const VueTree = {
  Classic,
  Modern
}
export VueTree

问题在于你components。我可以看到你正在使用Treeview，所以它是recursive component。您应该特别注意如何创建它们，因为它可以创建无限循环。

查看我的 github ，了解VueTree应如何运作的示例。

Ps：不要忘记在递归组件中添加key和名称。

组件可以在自己的模板中递归调用自己。但是，他们只能使用name选项执行此操作。 Vue Docs 。

如果我说的不起作用。请随时向我发送 github链接，我将很乐意为您提供帮助。

Answer 3

另一种方式

index.js

export { default as Classic } from './components/Classic.vue'
export { default as Modern } from './components/Modern.vue'

Modern.vue

import { Classic } from './components/index';

export default {
   components: { Classic }
}

注意： Chlidren组件必须在index.js中的父组件之前导出。

Answer 4

我觉得最好这样做?

index.js / index.ts

import ParentName from './ParentName.vue'
import ChildName from './ChildName.vue'

export default ParentName

export { ChildName }

ComponentName.vue

import ParentName, { ChildName } from '~/components/abstractName'

export default {
   components: {
       ParentName,
       ChildName
   }
}

无法导入/导出vuejs组件

4 个答案:

index.js

Modern.vue