同级子组件数据变更时如何刷新另一子组件？含实际业务场景

针对你提到的「PO项新增后，让payment组件重新调用API加载最新数据」的场景，以下是主流前端框架的具体实现方案：

Vue 实现方案 #

方案1：通过key强制刷新组件 #

父组件给payment组件绑定一个唯一key，每次PO项新增成功后更新这个key，Vue会销毁旧组件并重新创建，自动触发组件生命周期钩子（如created/mounted），在钩子中调用API即可。

父组件代码示例：

<template>
  <div>
    <!-- PO项新增组件，新增成功后触发父组件方法 -->
    <POItemAdd @add-success="refreshPayment" />
    <!-- 绑定key，key变化时组件重新渲染 -->
    <Payment :key="refreshKey" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      refreshKey: 0
    }
  },
  methods: {
    refreshPayment() {
      // 每次新增后更新key值
      this.refreshKey += 1
    }
  }
}
</script>

Payment组件代码：

<script>
export default {
  created() {
    // 组件创建时调用API
    this.fetchPaymentData()
  },
  methods: {
    async fetchPaymentData() {
      const res = await this.$axios.get('/api/payment/list')
      this.paymentList = res.data
    }
  }
}
</script>

方案2：监听父组件传递的状态变更 #

父组件维护一个状态标记，PO项新增后切换标记状态，Payment组件监听这个状态变化，主动触发API调用。

父组件代码：

<template>
  <div>
    <POItemAdd @add-success="toggleUpdateFlag" />
    <Payment :po-updated="poUpdated" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      poUpdated: false
    }
  },
  methods: {
    toggleUpdateFlag() {
      this.poUpdated = !this.poUpdated
    }
  }
}
</script>

Payment组件代码：

<script>
export default {
  props: ['poUpdated'],
  watch: {
    poUpdated() {
      // 状态变化时重新调用API
      this.fetchPaymentData()
    }
  },
  methods: {
    async fetchPaymentData() {
      const res = await this.$axios.get('/api/payment/list')
      this.paymentList = res.data
    }
  }
}
</script>

React 实现方案 #

方案1：通过key强制刷新组件 #

父组件给Payment组件设置key，PO项新增后更新key，React会重新渲染组件，在useEffect中调用API。

父组件代码：

import { useState } from 'react'
import POItemAdd from './POItemAdd'
import Payment from './Payment'

export default function Parent() {
  const [refreshKey, setRefreshKey] = useState(0)

  const handlePOAdd = () => {
    setRefreshKey(prev => prev + 1)
  }

  return (
    <div>
      <POItemAdd onAddSuccess={handlePOAdd} />
      <Payment key={refreshKey} />
    </div>
  )
}

Payment组件代码：

import { useEffect, useState } from 'react'
import axios from 'axios'

export default function Payment() {
  const [paymentList, setPaymentList] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get('/api/payment/list')
      setPaymentList(res.data)
    }
    fetchData()
  }, []) // 组件重新创建时自动执行

  return <div>{/* 渲染支付数据 */}</div>
}

方案2：监听props中的更新信号 #

父组件传递一个状态标记给Payment组件，子组件通过useEffect监听标记变化，触发API调用。

父组件代码：

import { useState } from 'react'
import POItemAdd from './POItemAdd'
import Payment from './Payment'

export default function Parent() {
  const [poUpdated, setPoUpdated] = useState(false)

  const handlePOAdd = () => {
    setPoUpdated(prev => !prev)
  }

  return (
    <div>
      <POItemAdd onAddSuccess={handlePOAdd} />
      <Payment poUpdated={poUpdated} />
    </div>
  )
}

Payment组件代码：

import { useEffect, useState } from 'react'
import axios from 'axios'

export default function Payment({ poUpdated }) {
  const [paymentList, setPaymentList] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get('/api/payment/list')
      setPaymentList(res.data)
    }
    fetchData()
  }, [poUpdated]) // 监听poUpdated变化

  return <div>{/* 渲染支付数据 */}</div>
}

核心思路 #

不管使用哪种框架，核心逻辑都是以父组件作为中间通信层：

1. 子组件2（PO项新增）完成操作后，向父组件发送通知
2. 父组件通过更新key或状态标记，触发子组件1（Payment）的刷新逻辑
3. 子组件1收到触发信号后，重新调用API获取最新数据

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