Vue.js：动态获取已注册的组件

Question

Here's a jsBin showing my scenario

I have a selector <component :is="selectedComponent"></component> , and a <select v-model="currentComponent">...</select> which allows me to select which one is shown.

Currently I am maintaining a separate list of components that looks like so:

var componentList = [
  { name: 'Component A', id: 'component-a' },
  { name: 'Component B', id: 'component-b' }
]; 

And that list is fed into the select element's <option> items with id as the value, and name as the text.

This is not very DRY as I need to maintain this list with each new component. I would like to abstract the component list in a way that is more elegant.

I tried doing in the app:

var vm = Vue.extend({
  components: {
    'component-a': ComponentA,
    // etc.
  }
  computed: {
    componentList: function() {
      // map this.$options.components or something else?
    }
  }
});

But I am getting nowhere. Any tips? Best practices?

Thank you!

Answer 1

I'm doing something similar in my current project, I have all my components in a folder called 'components' and inside that folder, an index.js file that exports all the components, like this:

export component1 from './component1.vue'
export component2 from './component2.vue'

...etc

and inside my vue component I import them all like this:

import * as components from '../components'

var vm = new Vue({
  components: components,
  computed: {
    componentsList() {
       return Object.keys(components)
    }
  }
})