Vue 子组件向父组件传值

 1、使用自定义事件 ($emit)

这是Vue中最常用的子组件向父组件传递数据的方式。子组件通过触发一个自定义事件，并附加数据作为参数，父组件则监听这个事件并处理传递过来的数据。

子组件 (发送数据)：

<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      // 触发一个名为'dataSent'的自定义事件，并传递数据
      this.$emit('dataSent', { key: 'value' });
    }
  }
}
</script>

父组件 (接收数据)：

<template>
  <child-component @dataSent="handleDataFromChild"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleDataFromChild(data) {
      console.log('从子组件接收到的数据:', data);
    }