当前位置：首页 > article >正文

Vue3父传子

article 2024/11/5 21:35:51

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 的值，儿子会立刻收到更新的数字。