Vue兄弟组件通信实现方案咨询：弹窗保存后通知子组件刷新

优先选择Pinia来实现这个需求，这是Vue3官方推荐的状态管理方案，相比event-bus（反模式）更易追踪、调试，也完全适配Vue3生态（$root通信仅Vue2可用，直接排除）。具体实现步骤如下：

1. 创建Pinia Store管理弹窗与刷新状态 #

定义一个包含弹窗状态和刷新触发标记的store，核心是用一个可变化的变量来触发子组件的重新请求：

// stores/popupStore.js
import { defineStore } from 'pinia'

export const usePopupStore = defineStore('popup', {
  state: () => ({
    currentPopup: null, // 控制弹窗显示的状态
    refreshTrigger: 0 // 用于触发数据刷新的标记，每次更新会触发监听
  }),
  actions: {
    // 打开弹窗
    openPopup(popupName) {
      this.currentPopup = popupName
    },
    // 关闭弹窗并触发刷新
    closePopupAndRefresh() {
      this.currentPopup = null
      // 通过递增标记触发监听（也可以用布尔值切换，只要状态变化就行）
      this.refreshTrigger++
    }
  }
})

2. 在弹窗组件中调用刷新方法 #

在动态加载的弹窗组件里，点击保存按钮完成POST请求后，调用store的closePopupAndRefresh方法：

<!-- 弹窗内的保存组件 -->
<template>
  <button @click="handleSave">保存</button>
</template>

<script setup>
import { usePopupStore } from '@/stores/popupStore'
import { postData } from '@/api' // 假设你的POST请求方法

const popupStore = usePopupStore()

const handleSave = async () => {
  try {
    await postData(/* 请求参数 */)
    // 保存成功后关闭弹窗并触发刷新
    popupStore.closePopupAndRefresh()
  } catch (err) {
    console.error('保存失败:', err)
  }
}
</script>

3. 在router-view的子组件中监听刷新触发 #

在需要重新获取数据的子组件里，监听refreshTrigger的变化，触发数据重新请求：

<!-- router-view中的子组件 -->
<template>
  <div>{{ data }}</div>
</template>

<script setup>
import { usePopupStore } from '@/stores/popupStore'
import { ref, onMounted, watch } from 'vue'
import { fetchData } from '@/api' // 你的GET请求方法

const popupStore = usePopupStore()
const data = ref(null)

// 初始化获取数据
const loadData = async () => {
  data.value = await fetchData()
}

onMounted(() => {
  loadData()
})

// 监听refreshTrigger变化，触发重新加载
watch(
  () => popupStore.refreshTrigger,
  () => {
    loadData()
  }
)
</script>

备选方案：父组件作为中间层（仅适合小型场景） #

如果项目暂时没用到Pinia，也可以通过父组件传递事件：

• 父组件给<blackout>绑定自定义事件（比如on-save-complete）
• 弹窗组件保存成功后，通过$emit触发这个事件
• 父组件接收到事件后，给<router-view>对应的子组件传递刷新信号（比如通过provide/inject或修改子组件的key）

但这种方式会增加父组件的复杂度，子组件层级较深时维护成本高，不如Pinia简洁。

内容的提问来源于stack exchange，提问作者Danila Kopyl