1. App.vue - 父组件
咱们先来看左边的 App.vue，它扮演的是“父亲”角色——你可以想象它是一位热心的老爸，手里拿着一条消息，正准备把这条消息送到“儿子”那里。
<script setup>
// 这个 setup 就像一个神奇的开关，一开起来，里面的东西直接可以用！
// 引入了 SonCom（儿子组件），可以理解为“叫上儿子来！”
import SonCom from './son-com.vue'
</script>
<template>
<div class="father">
<h2>父组件App</h2>
<!-- 1. 绑定属性 -->
<SonCom message="father message"/>
</div>
</template>
<style scoped>
/* 样式在这儿，打扮打扮父亲！ */
</style>
解释：
-
<SonCom message="father message"/>：这里老爸（App.vue）对着儿子（SonCom）喊了一声：“喂，儿子！我给你带了一个消息：‘father message’！记得收好了！” -
message="father message"：这个地方，就是所谓的“绑定属性”。这个名字message就是我们用来传递数据的“渠道”。比如你家要寄包裹，“message”就相当于包裹的标签，儿子收到后就能读到“父亲传来的数据”。
2. son-com.vue - 子组件
再来看看右边的 son-com.vue，这是儿子接收数据的地方。
<script setup>
// defineProps 就像一个数据接收箱，儿子打开箱子就能看到老爸给的数据啦！
defineProps({
message: String
})
</script>
<template>
<div class="son">
<h3>子组件Son</h3>
<div>
父组件传入的数据 = {{ message }}
</div>
</div>
</template>
<style scoped>
/* 儿子也得稍微打扮一下！ */
</style>
解释：
-
defineProps({ message: String })：这里的defineProps就是儿子打开的“接收箱”。在箱子上，儿子写上了标签“message”（意思是“我准备接收这个叫message的数据”），类型是String，这样确保数据格式对得上。 -
{{ message }}：这个地方是儿子在展示老爸传来的数据。儿子把message这个变量放在{{ }}里，让它出现在页面上。意思是：“看呀，我爸给我发来的消息是：father message！”
总结：父传子的过程
- 父亲组件（
App.vue）用message="father message"把数据“贴”在儿子组件（SonCom）身上。 - 儿子组件用
defineProps打开数据接收箱，看到“哦，我爸传来了一个叫message的消息”。 - 最后，儿子用
{{ message }}把消息展示出来，告诉大家“这是我爸给的！”
命名规则小贴士
这里的“message”其实是个名字，你可以随便改，比如叫“爸爸的叮嘱”。只要两边的名字对得上（父组件传递的 message="..." 和子组件的 defineProps({ message: String }) ），数据就能传递成功！
所以，只要“老爸发什么名字的包裹，儿子接收箱也叫同样的名字”，就能愉快地通信啦！
完整代码如下：
