iview 如何跨组件控制Modal 的显示隐藏

小橘子皮__兜兜

已于 2022-09-29 17:39:37 修改

阅读量780

点赞数

文章标签： view design 前端 javascript

于 2022-09-29 17:38:19 首次发布

原文链接：https://blog.csdn.net/landiyaaa/article/details/112451588

版权

我在项目开发中遇到的问题：

父组件点击链接，在父组件中给子组件用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