使用ant-design-vue的modal,modal封装成一个组件,父组件调用关闭modal之后重新刷新父组件的表格数据怎么办?

使用ant-design-vue的modal,modal封装成一个组件,父组件调用关闭modal之后重新刷新父组件的表格数据怎么办?

一、问题描述

最近实践过程中遇到这样一个问题,我封装了一个modal组件,在父组件中引入并且使用,当打开modal修改完数据点击确定之后,关闭modal,此时发现表格的数据没有重新加载。这样很不合理,明明数据已经更新了,但是并没有立即展示出来。

二、问题解决

最初的想法是,在父组件中把刷新表格的方法,以及当前页,每页显示的条数,传给子组件。然后子组件通过props接收。当修改完数据的时候,让其执行这个方法。但是这样太麻烦了,后来又想了一个方法。

当更新完数据之后,在子组件通过$emit,给父组件发送一个事件。父组件接收到这个事件后,直接调用刷新表格数据的方法即可。

子组件
在这里插入图片描述
父组件
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41880073/article/details/123339768