首页 文章

无法导入/导出vuejs组件

提问于
浏览 次
3

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

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

javascript npm vue.js vuejs2 vue-component

3 回答

  • 3

    您需要将 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

    回复于
  • 1

    你的设置很好 .

    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链接到这个问题，我很乐意提供帮助 .

    回复于
  • 1

    其他方式

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

    NOTICE: Chlidren组件必须仅在index.js中的父组件之前导出 .

    回复于

相关问题