vue3报警提示框（vue2.x的extend替代）

木玄客

已于 2022-11-24 10:02:52 修改

阅读量1.5k

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

于 2022-11-15 16:56:33 首次发布

本文链接：https://blog.youkuaiyun.com/linchui22/article/details/127868889

版权

Vue学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue3中如何创建并使用一个自定义的对话框组件，作为Vue2.x中extend功能的替代。首先展示了dialog.vue组件的创建过程，然后在test.ts文件中引入并使用该组件，最后在need.vue组件中导入alertMsg方法来展示对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、新建一个提示框的vue
dialog.vue:


<template>
<div>
	<div>{{title}}</div>
	<div>{{container}}</div>
</div>
</template>
 
<script setup>
import { ref } from "vue"
const props = defineProps({
	msg: {}
})
const propData = props.msg;
const title= ref(propData.title);
const container = ref(propData.container);
</script>

2、在一个ts文件中引用上一个提示框组件
test.ts:

import { createVNode, render } from "vue";
import dialog './src/dialog.vue'

const alertMsg = (propData: any) => {
	let alert = createVNode(dialog, {
		//传值
		msg: propData.props
	});
	// 先生成一个vnode的代码块
	render(null, document.querySelector('body') as HTMLElement);
	// 通过赋值null清空之前生成的vnode
	render(alert , document.querySelector('body') as HTMLElement);
}

export default dealAlert;

3、在需要使用的vue中导入alertMsg方法
nedd.vue:

import dealAlert from '@/......'
dealAlert({
	props: {
		//数据
	}
})