【Vue】scoped作用父子组件通信 props emit-开发者社区

文章目录

Ⅰ. scoped 作用及原理
- 一、scoped 的作用
- 二、scoped的原理
Ⅱ. 父子组件通信
- 一、介绍
- 二、父传子：`props`
- 三、子传父：`v-on` && `emit`

Ⅰ. scoped 作用及原理

一、scoped 的作用

默认情况下，写在组件中的style样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

全局样式：默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件的标签

MyLeft.vue文件：

<script setup></script><template><divclass="my-left"style="flex:1;align-items:center;height:100px;background:paleturquoise;text-align:center;"><h3>每天起床第一句</h3></div></template><style>h3{color:red;}</style>

MyRight.vue文件：

<script setup></script><template><divclass="my-right"style="flex:1;align-items:center;height:100px;background:plum;text-align:center;"><h3>先给自己打个气</h3></div></template><style></style>

App.vue文件：

<script setup>importMyLeftfrom'./components/MyLeft.vue'importMyRightfrom'./components/MyRight.vue'</script><template><divclass="container"><MyLeft/><MyRight/></div></template><style>.container{display:flex;}</style>

至此，发现MyRight.vue中h3的样式受到了的影响。为了解决样式污染/冲突问题，可以给组件的style添加scoped属性，这样就避免了不同组件之前样式污染的问题。

二、scoped的原理

组件内所有标签都被添加data-v-hash值的自定义属性
css选择器都被添加[data-v-hash值]的属性选择器

最终效果：必须是当前组件的元素，才会有这个自定义属性，从而保证了样式只能作用到当前组件。

Ⅱ. 父子组件通信

一、介绍

组件通信，是指一个把数组传递给另一个组件。

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

组件之间的关系：

父子关系：组件 A 使用了组件 B，则 A 是父，B 是子
非父子关系：比如祖先和孙子的关系，兄弟关系

二、父传子：`props`

当子组件的数据需要按需改变的时候，就得让父组件传递数据给子组件，从而提高组件的灵活性和复用性。

父组件通过props（自定义属性）将数据传递给子组件，如下所示：

<MyButton text="提交"color="blue"/>

其中text和color就是props，然后子组件通过内置方法defineProps()来接收这些自定义属性，如下所示：

<script setup>// 可以只写自定义属性，而不需要和下面一样写完整！// 完整写法如下所示：// type：表示类型// default：表示默认值// required：表示是否必填constprops=defineProps({text:String,color:{type:String,default:'blue',required:false},price:Number})</script><template><button:style="{ backgroundColor: color }">{{text}}</button></template>

在<script setup>中需要用到defineProps()中传入的属性时，必须先拿到props对象或者解构出对应的属性，否则是没办法在<script setup>中使用的；

但是在<template>中则不需要，因为有 “语法糖” 的好处，Vue会自动解包props，所以不需要拿到props对象就能直接使用对应的属性！

下面举个例子：

App.vue文件：

<script setup>importMyGoodsfrom'./components1/MyGoods.vue';// 提供数据// 商品列表constgoodsList=[{id:'4001172',name:'称心如意手摇咖啡磨豆机咖啡豆研磨机',price:289,picture:'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg'},{id:'4001594',name:'日式黑陶功夫茶组双侧把茶具礼盒装',price:288,picture:'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg'},{id:'4001009',name:'竹制干泡茶盘正方形沥水茶台品茶盘',price:109,picture:'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png'},{id:'4001874',name:'古法温酒汝瓷酒具套装白酒杯莲花温酒器',price:488,picture:'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png'},{id:'4001649',name:'大师监制龙泉青瓷茶叶罐',price:139,picture:'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png'},{id:'3997185',name:'与众不同的口感汝瓷白酒杯套组1壶4杯',price:108,picture:'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg'},{id:'3997403',name:'手工吹制更厚实白酒杯壶套装6壶6杯',price:100,picture:'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg'},{id:'3998274',name:'德国百年工艺高端水晶玻璃红酒杯2支装',price:139,picture:'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg'}]</script><template><divclass="list"><!--在子组件中，传入自定义属性--><MyGoods v-for="item in goodsList":key="item.id":imgUrl="item.picture":price="item.price":title="item.name"/></div></template><style lang="scss">*{margin:0;padding:0;box-sizing:border-box;}.list{width:1000px;margin:0auto;display:flex;flex-wrap:wrap;}</style>

子组件MyGoods.vue：

<script setup>defineProps(['imgUrl','title','price'])// 采用简写的方式，不要求具体的类型等</script><template><divclass="item"><img:src="imgUrl":alt="title"/><pclass="name">{{title}}</p><pclass="price">{{price}}.00</p></div></template><style lang="scss"scoped>.item{width:240px;margin-left:10px;padding:20px 30px;transition:all0.5s;margin-bottom:20px;.item:nth-child(4n){margin-left:0;}&:hover{box-shadow:0px 0px 5pxrgba(0,0,0,0.2);transform:translate3d(0,-4px,0);cursor:pointer;}img{width:100%;}.name{font-size:18px;margin-bottom:10px;color:#666;}.price{display:flex;align-items:center;font-size:22px;color:firebrick;button{margin-left:48px;font-size:14px;outline:none;}}.price::before{content:'¥';font-size:22px;}}</style>

三、子传父：`v-on`&&`emit`

在上面父传子的案例中，如果新增一个砍价功能的按钮，会发现子组件不能直接修改父组件传递的数据，因为props是只读的，子组件不能修改。

解决方案：

在父组件中提供砍价功能对应的方法，然后在使用子组件的时候将该方法绑定起来，和props一起发送给子组件。绑定的语法实际上就是v-on，如下所示：
```
@自定义事件="父组件中修改数据的函数"
```
在子组件中通过defineEmits()拿到触发自定义事件的函数emit()，然后在砍价按钮中绑定点击事件，在该点击事件中去触发自定义事件，此时该自定义事件就会发送到父组件，父组件就会执行砍价功能对应的方法。emit()方法参数如下所示：
```
emit('自定义事件',父组件中对应方法所需的参数...)
```

defineEmits()本质是一个编译宏，用于生成一个 “事件触发器函数”，通常叫emit，而emit才是真正用来发射事件的函数，所以不要搞错（直接拿defineEmits()去发射事件，那就错了）

App.vue文件：

<script setup>importMyGoodsfrom'./components2/MyGoods.vue';import{ref}from'vue'// 商品列表constgoodsList=ref([{id:'4001172',name:'称心如意手摇咖啡磨豆机咖啡豆研磨机',price:289,picture:'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg'},{id:'4001594',name:'日式黑陶功夫茶组双侧把茶具礼盒装',price:288,picture:'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg'},{id:'4001009',name:'竹制干泡茶盘正方形沥水茶台品茶盘',price:109,picture:'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png'},{id:'4001874',name:'古法温酒汝瓷酒具套装白酒杯莲花温酒器',price:488,picture:'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png'},{id:'4001649',name:'大师监制龙泉青瓷茶叶罐',price:139,picture:'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png'},{id:'3997185',name:'与众不同的口感汝瓷白酒杯套组1壶4杯',price:108,picture:'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg'},{id:'3997403',name:'手工吹制更厚实白酒杯壶套装6壶6杯',price:100,picture:'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg'},{id:'3998274',name:'德国百年工艺高端水晶玻璃红酒杯2支装',price:139,picture:'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg'}])// 砍价功能对应的方法，由父组件提供constbargain=(index,price)=>{goodsList.value[index].price-=price}</script><template><divclass="list"><!--在子组件中，传入自定义属性--><MyGoods v-for="(item, index) in goodsList":key="item.id":urlImg="item.picture":price="item.price":title="item.name":idx="index"@ccc="bargain"/></div></template><style lang="scss">*{margin:0;padding:0;box-sizing:border-box;}.list{width:1000px;margin:0auto;display:flex;flex-wrap:wrap;}</style>

MyGoods.vue文件：

<template><divclass="item"><img:src="urlImg":alt="title"/><pclass="name">{{title}}</p><pclass="price"><span>{{price}}.00</span><button @click="cutPrice">砍价</button></p></div></template><script setup>constprops=defineProps(['urlImg','title','price','idx'])constemit=defineEmits();constcutPrice=()=>{emit('ccc',props.idx,3);}</script><style scoped>.item{width:240px;margin-left:10px;padding:20px 30px;transition:all0.5s;margin-bottom:20px;.item:nth-child(4n){margin-left:0;}&:hover{box-shadow:0px 0px 5pxrgba(0,0,0,0.2);transform:translate3d(0,-4px,0);cursor:pointer;}img{width:100%;}.name{font-size:18px;margin-bottom:10px;color:#666;}.price{font-size:22px;color:firebrick;display:flex;align-items:center;height:36px;button{font-size:14px;margin-left:50px;}}.price::before{content:'¥';font-size:22px;}}</style>