在开发项目中,遇到了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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。