Using the modal of ant-design-vue, the modal is encapsulated into a component. What if the parent component calls to close the modal and refreshes the table data of the parent component?

1. Problem description

I encountered such a problem in the recent practice process. I encapsulated a modal component, introduced and used it in the parent component. After opening the modal and modifying the data, click OK, and then close the modal. At this time, I found that the data of the table was not reloaded. This is very unreasonable, obviously the data has been updated, but it is not displayed immediately.

2. Problem solving

The original idea is to pass the method of refreshing the table, as well as the current page and the number of bars displayed on each page, to the child component in the parent component. The child component then receives it via props. When the data is modified, let it execute this method. But this is too troublesome, and then I thought of a way.

When the data is updated, the child component passes $emit, and an event is sent to the parent component. After the parent component receives this event, it can directly call the method to refresh the table data.

child component

parent component