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

我在当前项目中做了类似的事情，我将所有组件放在一个名为＆＃39; components＆＃39;在该文件夹中，是一个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)
    }
  }
})

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

1 个答案: