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>
解释：
-
<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 }) ），数据就能传递成功！
所以，只要“老爸发什么名字的包裹，儿子接收箱也叫同样的名字”，就能愉快地通信啦！
完整代码如下：
如果在父组件里面添加一个数字：
<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 样式只是让父组件“穿上独一无二的衣服”，不影响其他组件的样式。
总结一下
这段代码里有两个关键的绑定方式：
- 直接传值：比如
message="father message"，这种传递方式直接把字符串发给儿子，不需要冒号。 - 变量绑定：比如
:count="count"，这里的冒号:就相当于“打开数据管道”，允许父组件把它的变量count传递给儿子。也就是说，老爸可以动态地改变count的值，儿子会立刻收到更新的数字。
命名规则小贴士
属性名字（比如 message 和 count）其实是父子间的“通信代码”，只要两边名字对上了，数据就能成功传递。换句话说，父亲叫这个包裹“count”，那儿子也要叫它“count”，才能识别出来是同一个数据。
所以，这里就是：
:count="count"：用冒号表示变量绑定，把父组件的count变量（值为100）传递给儿子。message="father message"：直接传递字符串，适合静态信息。
这样一来，父亲的两条信息——一个数字，一个消息，就都送达儿子那里了！
原文地址：https://blog.csdn.net/Liuzhengyue_/article/details/143524150
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！