Vue3中使用“component“进行动态组件渲染时无法渲染等问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

Vue3中使用"component"进行动态组件渲染时无法渲染等问题；常规写法在 jsx 中没有办法正常渲染。可以通过如下方式:

一、jsx中使用resolveComponent进行渲染？

import { resolveComponent, h } from "vue";
....
....
return icon ? (
  <>
      <el-icon>
          {h(resolveComponent(icon))}
      </el-icon>

    <span class="v-menu__title">{t(title as string)}</span>
  </>
) : (
  <span class="v-menu__title">{t(title as string)}</span>
)

{h(resolveComponent(icon))} 中的icon为组件名

二、其他方式

<script>
import { ref } from 'vue';
import MyComponentA from './MyComponentA.vue';
import MyComponentB from './MyComponentB.vue';
 
export default {
  setup() {
    // 动态地在两个组件之间变化
    const currentComponent = ref(MyComponentA);
 
    // 可以通过函数或其他逻辑来改变 currentComponent 的值
    // 例如，通过用户交互或其他逻辑来切换显示的组件
 
    return {
      currentComponent
    };
  }
};
</script>