使用composition api建立vue 3元件的實例

Question

假設我在 vue3 中使用以下語法建立了一個元件

// Message.vue
<script setup lang="ts">
const props = defineProps<{
    message: string
}>();
</script>

<template>
<span>{{ props.message }}</span>
</template>

如何建立此訊息元件的實例？

import Message from "./Message"

let message1 = Message({message:"hello world"}); // how to do this?

這樣我就可以將message1 與 一起使用，例如

Answer 1

您可以將以下匯入新增至文件。

import { createApp, h } from "vue";

然後以這種方式建立訊息元件。

let message1 = createApp({ 
  setup () {
    return () => h(Message, {message: "hello world"});
  }
});