在开发项目中,遇到了Model标签作为新组件的根目录,在关闭Model弹框吼,父组件中无法对v-if做设置。
父组件代码

<template>
    <div>
        <button @click="clickHandle">按钮</button>
        <model-plugin v-if="show" @closeModelPlugin="closeModelPlugin"></model-plugin>
    </div>
</template>
<script>
import ModelPlugin from './model-plugin'
export default {
    name: 'MetaUpdateWorkflow',
    components: {ModelPlugin},
    data () {
        return {
            show: false
        }
    },
    methods: {
        clickHandle () {
            this.show = true
        },
        closeModelPlugin () {
            this.show = false
        }
    }
}
</script>

<style scoped>
</style>

子组件代码

<template>
    <Modal
        :visible.sync="modal1"
        title="普通的Modal对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>对话框内容</p>
        <p>对话框内容</p>
        <p>对话框内容</p>
    </Modal>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {
            modal1: true
        }
    },
    methods: {
        cancel () {
            this.$emit('closeModelPlugin')
        },
        ok () {
            this.$emit('closeModelPlugin')
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style scoped>
</style>

问题,在这个时候呢是无法关闭掉弹框。
解决方法:
1、因为父组件点击确定或者取消时,modal1已经被设置为false。其实子组件已经不存在了,所以设置的this.show===false不起作用。
2、解决方法在Model组件中加入一个其他的根目录,当modal1为false的时候子组件还存在,这个时候设置的this.show===false就起作用。
最后子组件代码修改为如下代码,在Model外层包裹一层div

<template>
    <div>
        <Modal
            :visible.sync="modal1"
            title="普通的Modal对话框标题"
            @on-ok="ok"
            @on-cancel="cancel">
            <p>对话框内容</p>
            <p>对话框内容</p>
            <p>对话框内容</p>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {
            modal1: false
        }
    },
    methods: {
        cancel () {
            this.$emit('closeModelPlugin')
        },
        ok () {
            this.$emit('closeModelPlugin')
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style scoped>
</style>

666888
334 声望10 粉丝

知其然且知其所以然。