封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了。贴一下简易代码:
父组件:
<add-dialog v-if="addVisible" :dialogVisible="addVisible" @addClose="addClose"></add-dialog>
addClose () {
this.addVisible = false
}
子组件:
<template>
<div class="box">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:before-close="handleClose">
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialogVisible: Boolean
},
watch: {
dialogVisible: function () {
this.$emit('addClose')
}
}
}
</script>