优秀企业网站建设价格,大连三丰建设集团公司网站,个人网站备案网址,南宁企业网站seo1. App.vue - 父组件
咱们先来看左边的 App.vue#xff0c;它扮演的是“父亲”角色——你可以想象它是一位热心的老爸#xff0c;手里拿着一条消息#xff0c;正准备把这条消息送到“儿子”那里。
script setup
// 这个 setup 就像一个神奇的开关#xff0c;一开…1. App.vue - 父组件
咱们先来看左边的 App.vue它扮演的是“父亲”角色——你可以想象它是一位热心的老爸手里拿着一条消息正准备把这条消息送到“儿子”那里。
script setup
// 这个 setup 就像一个神奇的开关一开起来里面的东西直接可以用
// 引入了 SonCom儿子组件可以理解为“叫上儿子来”
import SonCom from ./son-com.vue
/scripttemplatediv classfatherh2父组件App/h2!-- 1. 绑定属性 --SonCom messagefather message//div
/templatestyle scoped
/* 样式在这儿打扮打扮父亲 */
/style解释 SonCom messagefather message/这里老爸App.vue对着儿子SonCom喊了一声“喂儿子我给你带了一个消息‘father message’记得收好了” messagefather message这个地方就是所谓的“绑定属性”。这个名字 message 就是我们用来传递数据的“渠道”。比如你家要寄包裹“message”就相当于包裹的标签儿子收到后就能读到“父亲传来的数据”。
2. son-com.vue - 子组件
再来看看右边的 son-com.vue这是儿子接收数据的地方。
script setup
// defineProps 就像一个数据接收箱儿子打开箱子就能看到老爸给的数据啦
defineProps({message: String
})
/scripttemplatediv classsonh3子组件Son/h3div父组件传入的数据 {{ message }}/div/div
/templatestyle scoped
/* 儿子也得稍微打扮一下 */
/style解释 defineProps({ message: String })这里的 defineProps 就是儿子打开的“接收箱”。在箱子上儿子写上了标签“message”意思是“我准备接收这个叫 message 的数据”类型是 String这样确保数据格式对得上。 {{ message }}这个地方是儿子在展示老爸传来的数据。儿子把 message 这个变量放在 {{ }} 里让它出现在页面上。意思是“看呀我爸给我发来的消息是father message”
总结父传子的过程
父亲组件App.vue用 messagefather 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 classfather h2父组件App/h2 !-- 1. 绑定属性 -- SonCom :countcount messagefather 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 部分
templatediv classfatherh2父组件App/h2!-- 1. 绑定属性 --SonCom :countcount messagefather message//div
/template在这里父组件通过 SonCom :countcount messagefather message/ 来喊儿子“喂儿子我这儿有两份数据注意接收哦” :countcount这个语法的关键是前面的冒号 :。在Vue里冒号表示“绑定”意思是把我们在 script setup 中定义的变量 count 的值传给 SonCom 组件。换句话说count 变量里的 100 会被传到儿子那里。就像是老爸说“我给你带了个数字100记得收好” messagefather message这部分是直接传字符串的没有冒号。老爸大喊一声“我还有一条文本消息‘father message’”这种直接写属性值的方式只适合简单的字符串而不能直接传递变量。
3. style scoped 部分
style scoped
/* 样式在这儿打扮打扮父亲 */
/style同样scoped 样式只是让父组件“穿上独一无二的衣服”不影响其他组件的样式。
总结一下
这段代码里有两个关键的绑定方式
直接传值比如 messagefather message这种传递方式直接把字符串发给儿子不需要冒号。变量绑定比如 :countcount这里的冒号 : 就相当于“打开数据管道”允许父组件把它的变量 count 传递给儿子。也就是说老爸可以动态地改变 count 的值儿子会立刻收到更新的数字。
命名规则小贴士
属性名字比如 message 和 count其实是父子间的“通信代码”只要两边名字对上了数据就能成功传递。换句话说父亲叫这个包裹“count”那儿子也要叫它“count”才能识别出来是同一个数据。
所以这里就是
:countcount用冒号表示变量绑定把父组件的 count 变量值为100传递给儿子。messagefather message直接传递字符串适合静态信息。
这样一来父亲的两条信息——一个数字一个消息就都送达儿子那里了
