vue3组合式api 子传父

在Vue 3中，可以使用组合式API来实现子组件向父组件传递数据。下面是一种常见的方法：

1. 在子组件中，使用`emits`选项声明一个自定义事件。例如，可以将一个名为`update-parent`的事件声明为子组件通知父组件更新的事件。

// ChildComponent.vue

<template>
  <button @click="updateParent">Update Parent</button>
</template>

<script>
import { defineComponent, useContext } from 'vue'

export default defineComponent({
  emits: ['update-parent'],
  methods: {
    updateParent() {
      this.$emit('update-parent', 'Data from child')
    }
  }
})
</script>

2. 在父组件中，使用子组件中声明的事件来监听并更新数据。例如，可以在父组件中使用`@update-parent`来捕获子组件触发的事件，并更新父组件的数据。

// ParentComponent.vue

<template>
  <div>
    <p>{{ childData }}</p>
    <ChildComponent @update-parent="handleUpdate" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const childData = ref('')

    const handleUpdate = (data) => {
      childData.value = data
    }

    return {
      childData,
      handleUpdate
    }
  }
})
</script>

在上述示例中，当子组件中的按钮被点击时，会触发`update-parent`事件，并将数据传递给父组件的`handleUpdate`方法。父组件会更新`childData`的值，并将其显示在页面上。

这样，通过自定义事件和监听，就可以实现子组件向父组件传递数据。请注意，这只是一种实现方式，根据具体的需求和场景，可能会有其他的方法来解决子传父的问题。