vue3 setup语法糖 子传父

在Vue 3中，使用Composition API，可以使用setup函数来实现子组件向父组件传递数据。

首先，在子组件中，你可以使用`emit`函数来触发自定义事件，并将需要传递给父组件的数据作为参数传递给该事件。例如：

// 子组件
<template>
  <button @click="sendDataToParent">传递数据给父组件</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['customEvent'],
  methods: {
    sendDataToParent() {
      this.$emit('customEvent', '这是要传递给父组件的数据');
    }
  }
}
</script>

然后，在父组件中，可以在子组件的标签上监听该自定义事件，并通过事件处理函数接收子组件传递过来的数据。例如：

// 父组件
<template>
  <div>
    <child-component @customEvent="receiveDataFromChild"></child-component>
    <p>从子组件接收到的数据：{{ receivedData }}</p>
  </div>
</template>

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

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

这样，当子组件中的按钮被点击时，会触发自定义事件`customEvent`，并将数据传递给父组件。父组件通过监听该事件并处理传递过来的数据，从而实现子传父的功能。