在开发项目中,遇到了 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>