Vue3父传子

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>

解释：

1. <SonCom message="father message"/>：这里老爸（App.vue）对着儿子（SonCom）喊了一声：“喂，儿子！我给你带了一个消息：‘father message’！记得收好了！”

2. 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>

解释：

1. defineProps({ message: String })：这里的 defineProps 就是儿子打开的“接收箱”。在箱子上，儿子写上了标签“message”（意思是“我准备接收这个叫 message 的数据”），类型是 String，这样确保数据格式对得上。

2. {{ message }}：这个地方是儿子在展示老爸传来的数据。儿子把 message 这个变量放在 {{ }} 里，让它出现在页面上。意思是：“看呀，我爸给我发来的消息是：father message！”

总结：父传子的过程

1. 父亲组件（App.vue）用 message="father message" 把数据“贴”在儿子组件（SonCom）身上。
2. 儿子组件用 defineProps 打开数据接收箱，看到“哦，我爸传来了一个叫 message 的消息”。
3. 最后，儿子用 {{ message }} 把消息展示出来，告诉大家“这是我爸给的！”

命名规则小贴士

这里的“message”其实是个名字，你可以随便改，比如叫“爸爸的叮嘱”。只要两边的名字对得上（父组件传递的 message="..." 和子组件的 defineProps({ message: String }) ），数据就能传递成功！

所以，只要“老爸发什么名字的包裹，儿子接收箱也叫同样的名字”，就能愉快地通信啦！

完整代码如下：

如果在父组件里面添加一个数字：

<script setup> 
// 这个 setup 就像一个神奇的开关，一开起来，里面的东西直接可以用！
// 引入了 SonCom（儿子组件），可以理解为“叫上儿子来！” import SonCom from './son-com.vue' const count =ref(100) 
</script>
<template> <div class="father"> <h2>父组件App</h2> <!-- 1. 绑定属性 --> <SonCom :count="count" message="father message"/> </div> 
</template> 
<style scoped> /* 样式在这儿，打扮打扮父亲！ */ </style>

1. script setup 部分

<script setup>
// 这个 setup 就像一个神奇的开关，一开起来，里面的东西直接可以用！
// 引入了 SonCom（儿子组件），可以理解为“叫上儿子来！”
import SonCom from './son-com.vue'
const count = 100  // 定义了一个叫 count 的常量，装着数字100
</script>

这里我们不仅引入了儿子组件 SonCom，还定义了一个 count 常量，值是 100。你可以把它想象成父亲的“特别叮嘱”——一个数字100，准备一起打包给儿子。

2. template 部分

<template><div class="father"><h2>父组件App</h2><!-- 1. 绑定属性 --><SonCom :count="count" message="father message"/></div>
</template>

在这里，父组件通过 <SonCom :count="count" message="father message"/> 来喊儿子：“喂，儿子！我这儿有两份数据，注意接收哦！”

• :count="count"：这个语法的关键是前面的冒号 :。在Vue里，冒号表示“绑定”，意思是把我们在 script setup 中定义的变量 count 的值传给 SonCom 组件。换句话说，count 变量里的 100 会被传到儿子那里。就像是老爸说：“我给你带了个数字100，记得收好！”

• message="father message"：这部分是直接传字符串的，没有冒号。老爸大喊一声：“我还有一条文本消息：‘father message’！”这种直接写属性值的方式，只适合简单的字符串，而不能直接传递变量。

3. style scoped 部分

<style scoped>
/* 样式在这儿，打扮打扮父亲！ */
</style>

同样，scoped 样式只是让父组件“穿上独一无二的衣服”，不影响其他组件的样式。

总结一下

这段代码里有两个关键的绑定方式：

1. 直接传值：比如 message="father message"，这种传递方式直接把字符串发给儿子，不需要冒号。
2. 变量绑定：比如 :count="count"，这里的冒号 : 就相当于“打开数据管道”，允许父组件把它的变量 count 传递给儿子。也就是说，老爸可以动态地改变 count 的值，儿子会立刻收到更新的数字。

命名规则小贴士

属性名字（比如 message 和 count）其实是父子间的“通信代码”，只要两边名字对上了，数据就能成功传递。换句话说，父亲叫这个包裹“count”，那儿子也要叫它“count”，才能识别出来是同一个数据。

所以，这里就是：

• :count="count"：用冒号表示变量绑定，把父组件的 count 变量（值为100）传递给儿子。
• message="father message"：直接传递字符串，适合静态信息。

这样一来，父亲的两条信息——一个数字，一个消息，就都送达儿子那里了！