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

相关推荐
LuciferHuang3 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing3 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20153 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言4 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手4 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言4 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友5 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手6 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿6 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉