Iview modal父子組件通信問題-點(diǎn)擊遮蔽層或按ESC如何修改modal顯示狀態(tài)

使用iview實(shí)現(xiàn)用戶添加功能，點(diǎn)擊按鈕彈出新增用戶的表單對(duì)話框(modal)組件，點(diǎn)擊確認(rèn)和取消已經(jīng)能夠使用$emit來傳遞顯示狀態(tài)了。但是點(diǎn)擊右上角的叉叉關(guān)閉或點(diǎn)擊遮蔽層或按ESC都會(huì)報(bào)圖1錯(cuò)誤。我不知道是什么事件來執(zhí)行this.$emit來修改父組件傳遞的狀態(tài)。

                   圖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，其中父組件中有監(jiān)聽on-complete，調(diào)用的是complete方法

<Row>
                    <Row>
                        <Input v-model="jobNum" placeholder="工號(hào)" 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內(nèi)容