javascript - Unable to importexport vuejs components - Stack Overflow

admin管理员组

文章数量:1291940

I have a folder like this.

VueTree
  ponents
    Classic.vue
    Modern.vue
  index.js

Classic and Modern are simple ponents with template, export default {} and a style. I am calling both inside index.js as:

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

const VueTree= {
  Classic ,
  Modern 
}

export default VueTree

So, when I import this module as:

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

I get this error

Unknown custom element: - did you register the ponent correctly? For recursive ponents, make sure to provide the "name" option.

I have name: "Classic" inside my ponents and I am including the in the current file using ponents: { Classic }, but I get the same error.

It only works if I export only one ponent as:

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

this will work and include the classic, but I can't export both of them like seen in this example .js

I have a folder like this.

VueTree
  ponents
    Classic.vue
    Modern.vue
  index.js

Classic and Modern are simple ponents with template, export default {} and a style. I am calling both inside index.js as:

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

const VueTree= {
  Classic ,
  Modern 
}

export default VueTree

So, when I import this module as:

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

I get this error

Unknown custom element: - did you register the ponent correctly? For recursive ponents, make sure to provide the "name" option.

I have name: "Classic" inside my ponents and I am including the in the current file using ponents: { Classic }, but I get the same error.

It only works if I export only one ponent as:

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

this will work and include the classic, but I can't export both of them like seen in this example https://github./greyby/vue-spinner/blob/master/src/index.js

• javascript
• npm
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Dec 22, 2017 at 8:54 hidar asked Dec 14, 2017 at 9:54 hidarhidar 5,9391616 gold badges4949 silver badges7575 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6 +50

You need to use export for named exports, not export default:

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

export {
  Classic ,
  Modern 
}

See: https://developer.mozilla/en-US/docs/web/javascript/reference/statements/export

The setup you have is fine.

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

const VueTree = {
  Classic,
  Modern
}
export VueTree

The problem is your ponents. I can see you're using a Treeview so, it is a recursive ponent. You should be extra careful about how you create them because it can create a infinite loop.

Take a look at my github for a example on how your VueTree should work.

Ps: Don't forget to add a key and a name to a recursive ponent.

Components can recursively invoke themselves in their own template. However, they can only do so with the name option. Vue Docs.

If what i said does not work. Feel free to send me a github link to the issue and i will be happy to help.

Another way

index.js

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

Modern.vue

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

export default {
   ponents: { Classic }
}

NOTICE: Chlidren ponent must by exported just BEFORE parent ponent in index.js.

I think it's better to do this

本文标签： javascriptUnable to importexport vuejs componentsStack Overflow