vue3提示框组件(vue3extend替代方案)

之前做过一个vue的提示框组件，想用vue3也实现一下：

tips.vue

<template>
<div>消息组件{{title}}</div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: '你好'
  }
})
</script>

index.ts

import { createVNode,render } from "vue";

import message from './src/index.vue'

export function msg(opiton: any) {
    const instance = createVNode(message, opiton);
    render(instance, document.querySelector('body') as HTMLElement);
}

使用：

<template>
  <button @click="fn">触发消息</button>
</template>

<script setup lang="ts">
import { msg } from '@/components/message/index';
let str:string;
const fn = () => {
  msg({
    title: str
  })
}
</script>