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事件也是同理,开发时需要注意。

相关推荐
white-persist5 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师43 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm