vue dialog对话框模块

a576837179

于 2021-01-23 22:30:04 发布

阅读量283

点赞数

分类专栏： vue功能块文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/a576837179/article/details/113063476

版权

vue功能块专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在Vue.js应用中实现和使用dialog对话框模块，包括从父页面调用子页面对话框的过程，以及相关配置和交互操作。

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

父页：

<template>
	<el-dialog title="修改" v-if="updateDialog" :visible.sync="updateDialog"  @close="handleAddClose" :model-append-to-body="false" :close-on-click-modal="false">
		<update-Dialog :updateChild="updateChild" updateEmit="updateEmit" ref="updateGroup"></update-Dialog>
	</el-dialog>
</template>

import updateDialog from '@/views/homePage/updateDialog'
export default {
	name: 'homePage',
	component: {updateDialog},
	data(){
		return {
			updateChild: [],
			updateDialog: false
		}
	},
	methods: {
		updateEmit(){
			this.handleAddClose()
		},
		handleAddClose(){
			this.updateDialog = false
		}
	}
}

子页：

<template>
	<el-button type="primary" @click="submit">提交</el-button>
</template>

export default {
	name: 'updateChild',
	prop: ['updateChild'],
	data(){
		return {

		}
	},
	methods: {
		submit(){
			this.$emit('updateEmit', false)
		}
	}
}