javascript - Vue.js:动态获取注册组件

Question

Here's a jsBin showing my scenario

我有一个选择器<component :is="selectedComponent"></component> ，以及 <select v-model="currentComponent">...</select>这允许我选择显示哪一个。

目前我正在维护一个单独的组件列表，如下所示:

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

该列表被输入 select元素的<option>带有 id 的项目作为值，并且 name如正文所示。

这不是很干燥，因为我需要用每个新组件维护这个列表。我想以更优雅的方式抽象组件列表。

我尝试在应用程序中执行以下操作:

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

但我一事无成。有小费吗？最佳实践？

谢谢!

Answer 1

我在当前的项目中做了类似的事情，我将所有组件都放在一个名为“components”的文件夹中，在该文件夹中，有一个导出所有组件的 index.js 文件，如下所示:

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

...等等

在我的 vue 组件中，我将它们全部导入，如下所示:

import * as components from '../components'

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