如何在Vue中遍历已注册组件名称，无需手动维护组件名称数组

问题原因 #

data 函数执行阶段Vue实例尚未完成初始化，你想访问的组件注册配置并不在this.components下，实际存储局部组件配置的是实例属性this.$options.components，也无法在data初始化阶段访问到。

可行方案 #

方案1：通过计算属性动态获取组件名

计算属性会在实例初始化完成后才计算取值，可以正确拿到注册的组件列表：

<template>
  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="(comp, n) in names"
        :key="n"
        :cols="n === 0 ? 2 : 10"
        >
          <v-card outlined tile>
            <component :is="comp"></component>
          </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import A from '../views/A.vue';
import B from '../views/B.vue';
import C from '../views/C.vue';

export default {
  name: 'XYZ',
  components: {
    A,
    B,
    C
  },
  computed: {
    names() {
      // 提取所有局部注册组件的名称
      return Object.keys(this.$options.components)
    }
  }
};
</script>

注意：该方法会拿到所有局部注册的组件，如果你后续在components里新增其他不需要渲染的组件，也会被遍历出来。

方案2：统一管理待渲染组件（更推荐）

单独把需要渲染的组件归集为一个对象，既可以直接注册组件，也能直接提取名称，不会混入不需要的组件，可控性更高：

<template>
  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="(comp, n) in names"
        :key="n"
        :cols="n === 0 ? 2 : 10"
        >
          <v-card outlined tile>
            <component :is="comp"></component>
          </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import A from '../views/A.vue';
import B from '../views/B.vue';
import C from '../views/C.vue';

// 统一归集待渲染的组件
const renderComponents = { A, B, C }

export default {
  name: 'XYZ',
  // 直接用归集好的对象注册组件
  components: renderComponents,
  data() {
    return {
      // 直接提取对象的键作为组件名数组，不需要手动编写
      names: Object.keys(renderComponents)
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者mustafa00