vue3 子组件中表格数据传给父组件，并显示在一列上

在 Vue3 中，你可以通过 props（属性传递）将子组件的表格数据传递给父组件。假设你在子组件有一个表格`ChildTable.vue`，它有一个`data`对象包含了表格数据：

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.columnYouWantToPass }}</td>
    </tr>
  </table>
</template>

<script setup>
export default {
  props: {
    // 这里接收父组件传递的数据
    passedData: { type: Array, required: true }
  },
  data() {
    return {
      items: this.passedData
    };
  }
};
</script>

然后，在父组件`ParentComponent.vue`中，你可以这样使用这个子组件并传入数据：

<template>
  <div>
    <!-- 使用v-bind绑定需要传递的列 -->
    <child-table :passed-data="tableData"></child-table>
  </div>
</template>

<script>
import ChildTable from './ChildTable.vue';

export default {
  components: {
    ChildTable
  },
  data() {
    return {
      tableData: [
        { columnYouWantToPass: '值1' },
        { columnYouWantToPass: '值2' }, // 父组件的数据
        ...
      ]
    };
  }
};
</script>

现在，当你在父组件中更新`tableData`数组时，子组件会自动同步展示新的数据。