vue3 script setup 子传父如何实现

在Vue 3中，可以使用`emits`选项来实现子组件向父组件传递数据。下面是一个示例：

在父组件中，定义一个方法来处理子组件传递过来的数据：

<template>
  <div>
    <p>父组件：{{ message }}</p>
    <ChildComponent @update-message="handleUpdateMessage" />
  </div>
</template>

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

let message = '初始消息'

const handleUpdateMessage = (value) => {
  message = value
}
</script>

在子组件中，使用`$emit`方法触发父组件定义的事件，并传递需要传递的数据：

<template>
  <button @click="updateMessage">更新消息</button>
</template>

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

const emits = defineEmits(['update-message'])

const updateMessage = () => {
  emits('update-message', '新的消息')
}
</script>

这样，当子组件中的按钮被点击时，会触发`updateMessage`方法，并通过`emits`函数触发父组件定义的`update-message`事件，将数据传递给父组件的`handleUpdateMessage`方法。父组件会更新`message`的值，并重新渲染显示。

请注意，这里使用了`defineEmits`函数来定义可以触发的事件列表，以避免在子组件中触发未定义的事件。