我在项目开发中遇到的问题:
父组件点击链接,在父组件中给子组件用v-model绑定布尔值,控制子组件Modal框显示。但是第一次点击链接,弹框出现,布尔值变为true,点击modal右上角X关闭后,在父组件里再次点击链接,弹框不显示,原因是第一次v-model绑定的值变为true后,modal没有变为false,一直是true状态。
解决:
父组件
<n-modal ref="nModal" v-model="showModal" />
data() {
return {
showModal: false,
}
}
子组件
<Modal
...
v-on="$listeners"
:value="value"
...
>
</Modal>
<script>
export default {
props: {
value: {
type: Boolean,
},
},
}
...
</script>
1、父组件
<template>
<div>
<n-modal ref="nModal" v-model="showModal" />
<Button @click="handleClick">点我弹框出现</Button>
</div>
</template>
<script>
import NModal from "./Modal.vue";
export default {
name: "electricityPurchasingAgent",
components: {
NModal,
},
data() {
return {
showModal: false,
};
},
methods: {
handleClick() {
this.showModal = true;
this.$refs.nModal.getTableData(); //调用子组件方法
},
}
}
2、子组件
<template>
<Modal
width="1200"
title="标题"
footer-hide
v-on="$listeners"
:value="value"
class-name="vertical-center-modal"
:transition-names="['scale-spring', 'fade']"
>
</Modal>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
},
},
}
</script>
这样就解决了,具体原因不太明白,也解释不清。。。。
转自:iview 如何跨组件控制和同步 Modal 的显示隐藏_landiyaaa的博客-CSDN博客_on-visible-change