Vue3组件式父子传值

下面是使用 <script setup> 语法的 Vue 3 组件之间传值的示例。

示例 1：使用 Props 和 Emits

父组件

<template><div><h1>父组件</h1><ChildComponent :message="parentMessage" @reply="handleReply" /><p>子组件回复: {{ childReply }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentMessage = ref('Hello from Parent');
const childReply = ref('');const handleReply = (reply) => {childReply.value = reply;
};
</script>

子组件

<template><div><h2>子组件</h2><p>来自父组件的消息: {{ message }}</p><button @click=