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://www.bmabk.com/index.php/post/92443.html
