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

相关推荐
雯0609~6 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ9 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z15 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜39 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40440 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish40 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five41 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序42 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54142 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省43 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript