1.父页面
<template>
<div>
<el-button
type="primary"
icon="el-icon-upload2"
size="small"
@click="openDialog"
>导入</el-button>
<uploadDialog ref="uploadDialog" :dialogVisible="dialogVisible" @closeDialog="dialogVisible = false"></uploadDialog>
</div>
</template>
<script>
import uploadDialog from '@/components/uploadDialog'
export default {
name: 'test',
components: {
uploadDialog
},
data() {
return {
dialogVisible: false,
}
},
methods: {
openDialog() {
this.dialogVisible = true
}
}
}
</script>
<style scoped>
</style>
2.子页面
<template>
<el-dialog title="对话框" :visible.sync='dialogVisible' :before-close="closeDialog" append-to-body>
<div class="file-upload">
<el-button type="primary" size="small" >保存</el-button>
<el-button @click="closeDialog" size="small">取消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'uploadDialog',
props: {
dialogVisible: {
type: Boolean
}
},
data() {
return {
}
},
methods: {
closeDialog() {
this.$emit('closeDialog')
}
}
}
</script>
<style lang='scss' scoped>
</style>
3.说明
【说明】
1.dialogVisible是父页面传过来的属性,子页面无法更改,
需要调用父类的方法修改,即this.$emit('closeDialog')
2.父页面中需要在子页面上添加@closeDialog方法
3.父页面中需要给子页面传递dialogVisible属性
4.示例图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a666557e28e01d37d399bfd8ee611f97.gif#pic_center)