如何测试具有特定名称的组件是否在 Composition API 中注册（Vue 3）

Question

我有一个通过名称加载动态组件的模板：

<template>
      <div>
        <div>
          <div>
            <component
              :is="getFormRenderer"
            ></component>
          </div>
        </div>
      </div>
</template>

getFormRenderer返回一个字符串（来自 API），该字符串通过名称标识组件。

所有可能的子组件（仅在本示例中telegram_send_message，并且time_time已导入并注册：

<script>
import { useStore } from "vuex";
import { computed } from "vue";

import exampleComponentOne from "@/components/forms/exampleComponentOne.vue";
import exampleComponentTwo from "@/components/forms/exampleComponentTwo.vue";
import defaultComponentTwo from "@/components/forms/defaultComponent.vue";

export default {
  name: "ActionEditor",
  setup() {
    const store = useStore();

    const getFormRenderer = computed(() => {
      return (
        store.state.level.actionSelected.plugin
      );
    });
    return {
      getFormRenderer,
    };
  },
  components: {
    exampleComponentOne,
    exampleComponentTwo,
    defaultComponent
  },
};
</script>

现在我想以 getFormRenderer 返回不存在的组件名称时<component>默认的方式修改动态。defaultComponent.vue

但我找不到任何方法来实现这一点。我想过使用 this.hasOwnProperty() 但在 setup() 内部，它的作用是未定义的。

有没有标准的方法来做到这一点？

Answer 1

检查组件是否存在的一个简单方法setup()是使用resolveComponent()or resolveDynamicComponent()，它按名称查找组件。请注意，文档resolveDynamicComponent()声明它会对不存在的组件发出警告，但实际上就是resolveComponent()这样做的（截至v3.0.9）。

如果未找到组件，这两个函数都会返回给定的组件名称，因此您可以通过验证返回类型不是字符串来确定组件是否存在：

import { computed, resolveDynamicComponent } from 'vue'

export default {
  setup() {
    const isComponent = name => typeof resolveDynamicComponent(name) !== 'string'

    const store = useStore();
    const getFormRenderer = computed(() => 
      isComponent(store.state.level.actionSelected.plugin)
        ? store.state.level.actionSelected.plugin
        : 'DefaultComponent'
    );

    return {
      getFormRenderer
    }
  },
  components: {
    //...
  },
}

演示