前言

在使用ElementUI官网的对话框时在同一个页面调用没毛病，但是想把它独立出来成为一个可重复用的组件的时候，就会发现弹出有问题，即使我们已经在子组件里设置了一个props监听状态。可是实现的效果如图，会造成框架自身带有的右上角×回调有问题，如下图：

报错，在子组件里修改了父组件的值，在这里我们应该给父组件提供一个信号，让父组件去修改子组件的值才行
在vue2.0中子组件中不能修改父组件的状态，否则在控制台中会报错。

解决方法:

在子组件里添加回调函数监听:before-close="cancelRegister"

在父组件里添加监听v-if="addrulesonoff"，
当需要关闭对话框时，在cancelRegister函数里修改addrulesonoff的状态并将其传给父组件，让父组件去修改子组件的props值就可以啦

详细代码：

子组件：

<template>
    <div class="addTerminalDialog">
        <el-dialog
        title="提示"
        :visible.sync="addDialogVisable"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :before-close="cancelRegister" 
        width="30%"
        center>
        <span>需要注意的是内容是默认不居中的</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelRegister">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
 name: 'addTerminalDialog',
 props: {
     addDialogVisable: {
         type: Boolean,
         default: false
     }
 },
 data() {
     return {
         addrulesonoff: 'false'
     }
 },
 methods: {
    cancelRegister() {
        this.addrulesonoff = false
        this.$emit('dialog-cancel')
    } 
 }
}
</script>

<style>

</style>

父组件：

 <add-terminal-dialog
    v-if="addrulesonoff"
    :add-dialog-visable="addrulesonoff"
     @dialog-sure="sureRegister"
     @dialog-cancel="closeHanlder">
</add-terminal-dialog>

实现效果：