之前做过一个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>