ant-design-vue使用中遇到的问题之:a-modal

最近在升级公司的老项目时遇到了点问题。那就是antd-vue的弹框在关闭时,触发了两次回调,导致调了两次接口 。

vue版本:3.x,antdv版本:4.x。 公司的老项目是用的vue2.x和antdv1.x,升级时我基本是整个文件copy过来之后再改改。为什么可以这样做呢?原因就是:在vue3中是可以兼容vue2的选项式语法的。 回归标题提到的问题, 当我在子组件中使用a-modal时,当子组件以a-modal为根节点,就会出现这样的问题。 子组件代码如下:

vue 复制代码
<template>
  <a-modal v-model:open="visible" title="Modal Title" @cancel="cancel">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<script>
export default {
  name: 'Npagination',
  props: ['visibles'],
  data() {
    return {
    }
  },
  methods: {
    handleOpen() {
      console.log('open from parent')
      this.visible = true
    },
    cancel() {
      this.visible = false,
      this.$emit('cancel')
        console.log('cancel from child')
    }
  },
  computed: {
    visible: {
      get() {
        return this.visibles
      },
      set(val) {
        // this.$emit('update:visible', val)
      }
    }
  },
  components: {
  }

}
</script>

<style></style>

父组件代码如下:

vue 复制代码
<template>
  <div>
    <a-button type="primary" @click="visible2 = true">open v2 model</a-button>
    <VModal :visibles="visible2" @cancel="handleCancel2" />
  </div>
</template>

<script>


import VModal from '../modalTest/v2modal.vue'

export default {
  name: 'Npagination',
  data() {
    return {
      visible2:false
    }
  },
  methods: {
    handleCancel2(){
      this.visible2 = false,
        console.log('cancel from parent')
    }
  },
  components: {
    VModal
  }

}
</script>

<style></style>

此时问题就出现了,首先看控制台,会发现警告:

这是因为a-model的oncancel上本应接收一个事件,而我们绑定了两个事件,所以它收到了一个数组类型的参数。那么此时点击弹框的取消按钮,会发生什么呢?

点击后我们看控制台:

cancel from parent被打印了两次,这是为什么呢?因为子组件的根节点是a-modal,因此父组件给子组件添加的cancel事件在被子组件捕获的同时,也被子组件中的a-modal组件捕获了,所以a-modal共接收到两个cancel事件,引发了警告。当点击取消按钮后,总共触发了三次事件:

1.a-modal组件的cancel捕获到了父组件的cancel,打印出了父组件中的cancel from parent 2.a-modal组件的cancel触发了了子组件的cancel,打印出子组件的cancel from child 3.子组件将2中的事件抛给父组件,再次触发了父组件的cancel,打印出了父组件的cancel from parent

解决办法:

1.在子组件的a-modal外层套一个div即可解决。 2.父组件给子组件绑定事件时,不要用cancel来绑定,换一个事件名称,如handleCancel也可以避免这个问题

注意:上面阐述的是cancel事件相关的问题,事实上ok事件也是同理,开发时需要注意。

相关推荐
江号软件分享41 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友9 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维