在Vue中，子组件向父组件传递数据

在Vue中，子组件可以使用 $emit 方法向父组件发送事件（event），而父组件则通过监听这个事件来接收数据。

以下是一个简单的例子：

子组件（Child.vue）：

<template>
  <div>
    <button @click="sendDataToParent">发送数据到父组件</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendDataToParent() {
      const data = { message: 'Hello, Parent!' };
      this.$emit('data-from-child', data);
    }
  }
}
</script>

父组件（Parent.vue）：

<template>
  <div>
    <p>来自子组件的数据: {{ dataFromChild.message }}</p>
    <child @data-from-child="receiveDataFromChild"></child>
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: {
    Child
  },
  data() {
    return {
      dataFromChild: {}
    };
  },
  methods: {
    receiveDataFromChild(payload) {
      this.dataFromChild = payload;
    }
  }
}
</script>

在这个例子中，子组件 Child 有一个按钮，点击后会触发 sendDataToParent 方法，该方法使用 $emit 触发一个名为 data-from-child 的事件，并传递数据。父组件 Parent 通过监听 data-from-child 事件来接收数据，并在自己的方法 receiveDataFromChild 中处理接收到的数据。