将iview的modal组件写到子组件中点击无法打开的问题

Question

我将modal模态框写入子组件中，父组件的button来打开这个模态框，写法如下：
父组件内容为：

<template>
    <div>
        <create-user :add-user-modal="addUserModal" @on-complete="complete">

        </create-user>
        <Card>
            <Button @click="addUserModal = true" type="primary" >{{ $t('add-user') }}</Button>
        </Card>
    </div>
</template>

<script>
    import createUser from './components/create-user.vue'
    export default {
        components: {
            createUser
        },
        data () {
            return {
                addUserModal: false,
            }
        },
        methods: {
            complete (e) {
                this.addUserModal = e;
            }
        }
    }
</script>

子组件内容为：

<template>
    <Modal v-model="showModal">
        <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>
        </div>
    </Modal>
</template>
<script>
    export default {
        name: 'add-user-modal',
        props : {
            addUserModal : Boolean,
        },
        data () {
            return {

                showModal: this.addUserModal,
                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.showModal = false;
                    _this.$emit('on-complete',false);
                    _this.$Message.success('Successfully delete');
                }, 2000);
            },
            close () {
                this.showModal = false;
                this.$emit('on-complete',!this.addUserModal);
            }
        },
        mounted: function() {
            console.log(this.show)
        }
    }
</script>

点击父组件按钮，模态框并没有出现

Answer 1

你可以通过 watch addUserModal 来变更 showModal 的值

Answer 2

子组件中showModal没有更新呀

Answer 3

你的showModal只是用传入的addUserModal初始化了，并没有双向绑定。你修改addUserModal并不会修改到showModal。

Answer 4

楼主，子组件的 v-model 改为 :value 试试看，可以参考传送门