在開發項目中,遇到了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>