如何在Vue3中实现子组件向父组件传递数据

在Vue3中，子组件可以使用$emit方法向父组件发送数据。父组件监听子组件触发的事件来接收数据。

以下是一个简单的例子：

子组件（ChildComponent.vue）:

<template>
  <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendDataToParent() {
      const data = { message: 'Hello from child component!' };
      this.$emit('data-from-child', data);
    }
  }
}
</script>

父组件（ParentComponent.vue）:

<template>
  <div>
    <ChildComponent @data-from-child="receiveDataFromChild" />
    <p>Data received from child: {{ dataFromChild }}</p>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromChild: null
    };
  },
  methods: {
    receiveDataFromChild(payload) {
      this.dataFromChild = payload.message;
    }
  }
}
</script>

在这个例子中，子组件有一个按钮，当按钮被点击时，会触发sendDataToParent方法，该方法使用this.$emit发送一个名为data-from-child的事件，并附带数据。父组件通过在<ChildComponent>标签上使用@data-from-child="receiveDataFromChild"来监听这个事件，并在事件处理函数receiveDataFromChild中接收数据，更新组件的状态。