无法导入/导出Vue.js组件

Question

我有一个像这样的文件夹。

VueTree
  components
    Classic.vue
    Modern.vue
  index.js

经典和现代是带有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" 选项。

在我的组件中，我有 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

- hidar

Answer 1

对于命名导出，您需要使用export，而不是export default：

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

export {
  Classic ,
  Modern 
}

请参见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

- craig_h

---

哦，我刚刚更改了它，但是我收到了相同的错误。`[Vue警告]：未知的自定义元素：<Classic> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。位于---> <Setting>` Setting是导入组件的页面。名称确实存在。 - hidar

很奇怪，我在我的一个项目中测试过这个，它完全正常工作。如果我使用 export default，我会得到你收到的错误。这可能是浏览器缓存问题，请尝试在“私人窗口/无痕模式”下打开您的网站，看看是否仍然出现错误。 - craig_h

啊，抱歉，那只是粘贴时的一个打字错误。我有eslint，也没有错误。就像我说的，如果我只导出一个，它就完美地工作。 - hidar

嘿，我对这个问题设了赏金，你能再检查一下是什么问题吗？谢谢。 - hidar

@hidar，我并没有发现你的代码有什么问题。我在我的GitHub页面上添加了一个工作示例，使用了vue-cli中的webpack-simple。我所做的就是在src/components中添加了这两个组件，并创建了一个index.js来导出它们。然后我在App.vue中导入了它们。 - craig_h

Answer 2

你的设置很好。

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

const VueTree = {
  Classic,
  Modern
}
export VueTree

问题在于你的组件。我看到你正在使用Treeview，所以它是一个递归组件。你应该非常小心地创建它们，因为它可能会创建一个无限循环。

请查看我的GitHub，了解有关如何使您的VueTree正常工作的示例。

附：不要忘记为递归组件添加key和名称。

组件可以在其自己的模板中递归调用自己。但是，它们只能通过name选项来这样做。

如果我的建议没有起作用，请随时将问题的 Github 链接发送给我，我很乐意提供帮助。

- Dany Gagnon

---

我没有使用那里看到的 VueTree 。这是我自己的模块，没有递归调用。现在它们只是两个简单的“hello world”文件。此外，你的 const 缺少 = ，而导出 VueTree 会抛出“意外的标记，期望 {”错误。 - hidar

@hidar 缺少了一个等号。请再次检查。 - Dany Gagnon

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 }
}

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

- Dmytro Ober

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
   }
}

- Pavel Levin