如何创建Vue3 <script setup>组件实例并通过<component>渲染？

你当前的写法无法直接实现，因为Vue3中用<script setup>编写的单文件组件（SFC）导入后是组件定义对象，不是可直接调用的构造函数，所以不能通过Message({message: "hello world"})这种方式创建"实例"。

以下是两种符合需求的实现方式：

方法一：封装高阶组件生成函数（匹配你的代码调用形式） #

创建一个函数，接收props参数后返回一个新组件，该组件内部会渲染Message并传入指定的props。这样生成的组件可以直接通过<component :is>渲染：

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import Message from './Message.vue';

// 定义生成带固定props的Message组件的函数
const createMessage = (props: { message: string }) => {
  return defineComponent({
    render() {
      return h(Message, props);
    }
  });
};

// 创建包含指定props的组件"实例"
const message1 = createMessage({ message: "hello world" });
</script>

<template>
  <component :is="message1" />
</template>

方法二：直接在动态组件中传递props（更简洁） #

如果不需要预先创建独立的"实例"变量，也可以直接在动态组件上绑定props，写法更简单：

<script setup lang="ts">
import Message from './Message.vue';

const messageProps = { message: "hello world" };
</script>

<template>
  <component :is="Message" v-bind="messageProps" />
</template>

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