iview 中Model標籤做爲組件的根目錄沒法操做父組件的v-if

在開發項目中,遇到了Model標籤做爲新組件的根目錄,在關閉Model彈框吼,父組件中沒法對v-if作設置。
父組件代碼this

<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>

子組件代碼code

<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>

問題,在這個時候呢是沒法關閉掉彈框。
解決方法:
一、由於父組件點擊肯定或者取消時,modal1已經被設置爲false。其實子組件已經不存在了,因此設置的this.show===false不起做用。
二、解決方法在Model組件中加入一個其餘的根目錄,當modal1爲false的時候子組件還存在,這個時候設置的this.show===false就起做用。
最後子組件代碼修改成以下代碼,在Model外層包裹一層divcomponent

<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>
相關文章
相關標籤/搜索