如果数据在另一个选项卡栏控制器中发生更改，如何正确更新表格单元格信息？

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  // 假设这是另一个选项卡栏控制器中的数据更改函数
  function handleDataChange(newData) {
    setData(newData);
  }

  // 使用 useEffect 监听数据变化并更新表格
  useEffect(() => {
    // 这里可以添加获取最新数据的逻辑，如果需要的话
  }, [data]);

  return (
    <div>
      {/* 另一个选项卡栏控制器 */}
      <AnotherTabController onDataChange={handleDataChange} />

      {/* 表格组件 */}
      <Table data={data} />
    </div>
  );
}

function AnotherTabController({ onDataChange }) {
  // 模拟数据更改
  function simulateChange() {
    const newData = [/* 新的数据 */];
    onDataChange(newData);
  }

  return (
    <div>
      <button onClick={simulateChange}>更改数据</button>
    </div>
  );
}

function Table({ data }) {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default App;

<template>
  <div>
    <!-- 另一个选项卡栏控制器 -->
    <AnotherTabController @data-change="handleDataChange" />

    <!-- 表格组件 -->
    <Table :data="data" />
  </div>
</template>

<script>
import { ref } from 'vue';
import AnotherTabController from './AnotherTabController.vue';
import Table from './Table.vue';

export default {
  components: {
    AnotherTabController,
    Table
  },
  setup() {
    const data = ref([]);

    // 数据更改处理函数
    function handleDataChange(newData) {
      data.value = newData;
    }

    return { data, handleDataChange };
  }
};
</script>