今天在遇到了一个有意思的问题,框架用的ant-design-vue,是这样的,我在将一个对话框封装成了一个组建。然后通过父组件页面的按钮来点击来对组建传递一个布尔值来决定弹框的显隐情况。父组件这边定义了一个属性来接受控制的值。
父组件中
<a-button @click="isShow = false">查看用户</a-button>
<use-message :show="isShow"></use-message>
// 在data中
isShow: false
子组件
<template>
<div>
<a-modal
title="Title"
:visible="isShow"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
<p>{{ ModalText }}</p>
</a-modal>
</div>
</template>
<script>
export default {
props:{
isShow:{
type: Boolean,
default: false
}
}
data() {
return {
ModalText: 'Content of the modal',
visible: false,
confirmLoading: false,
};
},
methods: {
showModal() {
this.visible = true;
},
handleCancel(e) {
this.isShow = false
this.$emit("close",false)
},
},
};
</script>
子组件中点击按钮,弹框弹出来了。点击关闭弹框之后,再次点击按钮,弹框不出来了。然后通过子组件将传递过去的这个值再传递回来,重新赋值给isShow就可以了。
<a-button @click="isShow = false">查看用户</a-button>
<use-message :show="isShow" @close = "close"></use-message>
// 在data中
isShow: false
// 方法区
close(e){
this.isShow = e
}
需要第二次开启弹框,还需要通过子传父,将原来的值复原。