vue3 子传父示例，使用组合式方式

好的，下面是一个使用 Vue3 组合式 API 实现子组件向父组件传递数据的示例：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传递的消息：{{ message }}</p>
    <ChildComponent @onMessage="handleMessage" />
  </div>
</template>

<script>
import { reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      message: ''
    })

    const handleMessage = (message) => {
      state.message = message
    }

    return {
      message: state.message,
      handleMessage
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
import { defineEmits } from 'vue'

export default {
  emits: ['onMessage'],
  setup(_, { emit }) {
    const sendMessage = () => {
      const message = 'Hello, 父组件！'
      emit('onMessage', message)
    }

    return {
      sendMessage
    }
  }
}
</script>

在父组件中，我们使用 `reactive` 函数创建一个响应式对象 `state`，并在 `setup` 函数中返回 `message` 和 `handleMessage`。`handleMessage` 是一个处理子组件传递过来消息的函数，它会更新 `state` 中的 `message`。

在子组件中，我们使用 `defineEmits` 函数定义一个名为 `onMessage` 的自定义事件，并在 `setup` 函数中调用 `emit` 函数触发该事件并传递消息。最后，我们将 `sendMessage` 函数返回，使得它可以在模板中被调用。

通过这样的方式，我们就可以实现子组件向父组件传递数据了。注意，这里使用的是组合式 API，所以在父组件和子组件中都没有使用 `data` 和 `methods` 选项。