javascript - 如何测试具有特定名称的组件是否已在 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>

现在我要修改动态<component>在某种程度上它默认为 defaultComponent.vue如果 getFormRenderer 返回一个不存在的组件名称。

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

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

Answer 1

检查组件是否存在于 setup() 中的一种简单方法是使用 resolveComponent()或 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: {
    //...
  },
}

demo