vue3+elementplus,如何点击按钮在父组件点击按钮到子组件获取的el-pro-table里面的值回到父组件

在Vue3中，使用Element Plus构建应用时，如果想在父组件通过点击按钮从子组件的`<el-pro-table>`表单中获取数据并传递回父组件，可以遵循以下步骤：

1. **设置数据流**：
- 在父组件的data中创建一个对象或者变量来存储需要共享的数据，例如 `selectedData`。

// 父组件 template 部分
<template>
  <el-button @click="fetchData">点击获取数据</el-button>
  <!-- 子组件引用 -->
  <child-component :tableData="selectedData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      selectedData: {}, // 初始化一个空的对象用于存放子组件传来的数据
    };
  },
  methods: {
    fetchData() {
      this.$refs.childComponent.getData(); // 调用子组件的方法获取数据
    },
  },
};
</script>

2. **在子组件中处理数据**：
- 在子组件里，当用户交互触发时，比如`<el-pro-table>`的某项操作，将数据通过props或者自定义事件的方式传给父组件。这里假设有一个名为`getData`的方法：

<!-- 子组件模板部分 -->
<template>
  <el-pro-table ref="childComponent" :data="tableData" @some-event="handleDataTableClick"></el-pro-table>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    tableData: Object, // 接收父组件传递的数据
  },
  methods: {
    handleDataTableClick(data) {
      this.$emit('update:selectedData', data); // 使用$emit触发自定义事件更新父组件的数据
    },
  },
});
</script>

3. **监听子组件的事件**：
- 在父组件的methods中，监听子组件触发的自定义事件`update:selectedData`，并在回调函数中接收新数据。

...
methods: {
  fetchData() {
    this.$refs.childComponent.getData();
  },
  receiveDataFromChild(event) {
    this.selectedData = event; // 更新父组件的数据
  },
},
watch: {
  selectedData(newData) {
    console.log('父组件接收到的新数据:', newData);
  },
},
...