Vue3跨组件更新数据后的实时刷新

• 问题描述

父组件给子组件传递表单数据，子组件展示后在子组件删除一条记录，如何让删除后的数据实时刷新。

示例代码：

父组件

父组件需要展示后端返回的数据到前端，这里展示的表格用组件封装

那么删除其中一条数据，如何实时刷新呢，以前在同一个界面时，在删除方法中重新调用展示数据的方法即可完成页面的实时刷新，

那么在跨组件中子组件删除一条数据后，需要调用父组件展示页面的方法（为什么不在子组件用展示页面的方法，因为头部的条件部分是在父组件中定义的，需要在父组件中传入条件展示界面）

子组件：

• 问题解决

我们使用pinia进行问题的解决

既然打开页面就要刷新数据，那么我们在pinia中定义展示数据的方法，父组件在进行调用

Search是父组件进行筛选的条件

由于子组件需要展示数据，那么我们也用pinia将数据储存起来

父组件请求：

子组件获取数据展示

那在子组件中删除一条数据后，重新调用展示数据的方法就能做到页面的实时刷新

由于展示的数据是带有条件的，那么我们也需要携带父组件的条件(也就是第一张图片传入的search,子组件props接收后带入到该方法即刷新页面)

• 效果