Vue3父组件点击按钮子组件返回数据

在Vue3中，父组件可以通过props向子组件传递数据，而子组件可以通过emit事件向父组件传递数据。因此，要实现父组件点击按钮子组件返回数据的功能，可以按照以下步骤进行：

1. 在父组件中定义一个数据属性，用于存储子组件返回的数据。

2. 在父组件中使用子组件，并通过props向子组件传递一个方法，用于接收子组件返回的数据。

3. 在子组件中定义一个方法，用于处理点击事件，并通过emit事件向父组件传递数据。

下面是一个示例代码，演示了如何实现父组件点击按钮子组件返回数据的功能：

// 父组件
<template>
  <div>
    <ChildComponent :handleData="handleData"></ChildComponent>
    <p>子组件返回的数据：{{ childData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      childData: '',
    };
  },
  methods: {
    handleData(data) {
      this.childData = data;
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="handleClick">点击返回数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const data = '这是子组件返回的数据';
      this.$emit('handleData', data);
    },
  },
};
</script>