Vue 3动态组件未按预期运行：API结果关联组件加载异常排查

问题出在动态组件的:is属性绑定规则上——直接写标签能正常显示，是因为Vue自动处理了组件名的映射，但动态组件得明确对应组件对象或者正确的注册名称。

办法一：直接绑定组件对象（推荐） #

不用字符串，直接把resultPage的值设为你导入的组件对象就行：

const loader = ref(true);
const resultPage = ref(null);

this.getResult()
.then((response : boolean) => {
    // 直接赋值组件对象，不是字符串
    resultPage.value = response ? Success : Fail;
})
.finally(() => {
    loader.value = false
})

模板不用改，:is可以直接接收组件对象：

<component
   v-if="!loader"
   :is="resultPage"
   :key="resultPage"
/>

办法二：注册组件并使用正确的组件名 #

要是你非得用字符串绑定，得确保组件已正确注册，而且字符串要匹配组件的注册名称：

1. 如果你用的是<script setup>，导入的组件会自动注册，此时组件的注册名是Success（大写开头）或者对应的短横线式success，但动态组件对大小写敏感，所以得把resultPage的值改成大写开头的字符串：

this.getResult()
.then((response : boolean) => {
    resultPage.value = response ? 'Success' : 'Fail';
})

2. 要是用的是选项式API（非<script setup>），得在components选项里手动注册组件：

import { defineComponent, ref } from 'vue';
import Fail from "./result/Fail.vue";
import Success from "./result/Success.vue";

export default defineComponent({
  components: {
    Success,
    Fail
  },
  setup() {
    const loader = ref(true);
    const resultPage = ref("");

    this.getResult()
    .then((response : boolean) => {
        resultPage.value = response ? 'Success' : 'Fail';
    })
    .finally(() => {
        loader.value = false
    })

    return { loader, resultPage }
  }
})

这样动态组件就能正确匹配到已注册的组件了。

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