vue3 子组件中表格数据传给父组件，

在 Vue3 中，如果想要从子组件将表格数据传递给父组件，通常会使用 prop（属性）来实现数据的单向数据流。这是一种常见的父子组件通信机制。以下是步骤：

1. **在子组件**中，假设有一个表格 `TableComponent`，它维护着一个数据数组 `tableData`。当这个数据发生变化时，你可以通过事件（如 `@emit` 或者自定义的方法）触发数据更新：

<template>
  <div>
    <!-- 表格内容 -->
    <button @click="updateParentData">更新数据并传递给父组件</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([]); // 定义表格数据

function updateParentData() {
  // 更新表数据后，通过 emit 触发父组件接收数据
  this.$emit('update:parentData', tableData.value);
}
</script>

2. **在父组件**的模板里，你可以定义一个计算属性或者直接接受一个名为 `parentData` 的 prop，并监听这个 prop 的变化：

<template>
  <TableComponent :parentData="tableData" />
  <!-- 可能还会有个显示数据的部分 -->
  <div v-for="(item, index) in tableData" :key="index">{{ item }}</div>
</template>

<script>
import TableComponent from './TableComponent.vue';
export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tableData: [] // 父组件的数据
    };
  },
  methods: {
    handleParentDataUpdate(data) {
      this.tableData = data; // 接收子组件传递的数据
    }
  }
};
</script>

每当子组件通过 `updateParentData` 发送新数据时，父组件的 `handleParentDataUpdate` 方法会被调用，更新父组件的数据。