Iview modal父子组件通信问题-点击遮蔽层或按ESC如何修改modal显示状态

Question

使用iview实现用户添加功能，点击按钮弹出新增用户的表单对话框(modal)组件，点击确认和取消已经能够使用$emit来传递显示状态了。但是点击右上角的叉叉关闭或点击遮蔽层或按ESC都会报图1错误。我不知道是什么事件来执行this.$emit来修改父组件传递的状态。

                   图1

我将用户新增的modal放入a.vue,代码如下：

<template>
    <Modal v-model="addUserModal" @on-keyup="test">
        <p slot="header" style="text-align:center">
            <Icon type="person-add"></Icon>
            <span>新增用户</span>
        </p>
        <div style="text-align:center">
            //表单主体
        <div slot="footer">
            <Button @click="close">取消</Button>
            <Button type="info" :loading="modal_loading" @click="addUser">新增</Button>
        </div>
    </Modal>
</template>
<script>
    export default {
        name: 'add-user-modal',
        props : {
            addUserModal : Boolean,
        },
        data () {
            return {
                modal_loading: false,
                formItem: {
                    jobNum: '',
                    name: '',
                    dept: '',
                    email: '',
                    phone: ''
                }
            }
        },

        methods: {
            addUser () {
                let _this=this;
                _this.modal_loading = true;
                console.log(_this.formItem);
                setTimeout(() => {
                    _this.modal_loading = false;
//                    _this.addUserModal = false;
                    _this.$emit('on-complete',false);
                    _this.$Message.success('Successfully delete');
                }, 2000);
            },
            close () {
                this.$emit('on-complete',!this.addUserModal);
            }
        }
    }
</script>

父组件引入a.vue，其中父组件中有监听on-complete，调用的是complete方法

<Row>
                    <Row>
                        <Input v-model="jobNum" placeholder="工号" style="width: 200px" />
                        <span @click="handleSearch" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="handleCancel" type="ghost" >取消</Button>
                        <Button @click="addUserModal = true">新增用户</Button>
                        <AddUserModal :add-user-modal="addUserModal" @on-complete="complete">

                        </AddUserModal>
                    </Row>
                    <Col>
                    <Row class="margin-top-10">
                        <Table :data="tableData1" :columns="tableColumns1" stripe ref="table2image"></Table>
                    </Row>
                    <br>
                    <Row>
                        <Page show-total placement="top" :total="total" :current="current" @on-page-size-change="pageChange" @on-change="change" size="small" show-elevator show-sizer></Page>
                    </Row>
                    </Col>

                </Row>
                //此处省略其他代码直接写出method中的complete方法
        methods: {
            complete (e) {
            this.addUserModal = e;
        }
        }

父组件的script内容

Answer 1

props的值只能从外部更改，不要内部更改props的值，一般来说，如果遇到prop的值需要修改的情况，应当把值传给父元素，然后由父元素赋值给组件，实现部分如下（以v-model的值为例）

props:['value'],
data(){return{currentValue:this.value}},
methods:{
    commit(){
        this.$emit('input',this.currentValue)
    }
}