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

【Vue】Scoped、组件间通信、Props检验

news 2025/8/15 16:54:52

Scoped

作用

*原理

组件通信

前置知识

什么是组件通信

为什么需要组件通信

如何进行组件通信

如何辨别两个组件的关系

父子组件通信

父传子

子传父

非父子组件通信

祖先传后代

语法

任意两个组件通信

步骤

Props校验

props是什么

作用

语法

组件的ref/reactive数据与props的区别

Scoped

作用

默认情况下，写在任何一个.vue文件中style的样式是全局样式，这样的话，不仅会影响当前组件，也会影响其他组件。
全局样式：会影响每个vue文件，存在样式污染/冲突的问题，style不添加scoped，默认都是全局样式。
局部样式：只针对当前组件中的标签生效，不会影响其他组件的标签，如果想让样式变为局部样式，那么需要给style添加scoped属性。

综上，scoped的作用就是防止不同组件（vue文件）样式污染//冲突。

*原理

当给组件的style添加了scoped属性之后，组件会发生如下变化：

scoped会给当前组件内的所有标签添加一个自定义属性，名为data-v-xxxxxxxx。
scoped会用这个属性选择器[data-v-xxxxxxxx]，配合我们编写的选择器形成一个交集选择器。
每个组件只要添加scoped属性，都会生成唯一的data-v-xxxxxxxx自定义属性。换句话说，每个组件生成的这个属性名都不同，因此形成的交集选择器只能选中当前组内的标签，保证了不会发生样式污染。

如下：表示既是h3又具备data-v-7b1a1c5e属性的

h3[data-v-7b1a1c5e]{

color:blue;

}

组件通信

前置知识

什么是组件通信

一个组件把数据传递给另一个组件。

为什么需要组件通信

开发Vue3的项目是借助了组件化的开发思想，不会把代码写在同一个文件中，而是会拆分一系列组件，进而通过组件的组装，拼装成完整的页面，这里难免需要进行组件间的数据传递，那么就需要组件通信了。

总的来说，可以归结于两点：

每个组件是一个独立的模块，组件的数据别的模块无法使用。
别的组件需要用到当前组件的数据，那么就需要组件通信了。

如何进行组件通信

需要辨别两个组件的关系，进而选择不同的通信方案

1、父子组件（掌握）：

父传子：props自定义属性
子传父：emit自定义事件

2、非父子组件（了解）：

祖先与后代：provide() + inject()
兄弟组件：eventBus(事件总线)
跨组件通信方案：Pinia（状态管理）

如何辨别两个组件的关系

父子关系：谁被使用，谁就是子组件，当前组件就是父组件

父子组件通信

父组件通过props将数据传递给子组件，子组件通过emit将数据传递给父组件。

父传子

当子组件的数据不固定的时候，也就是子组件的数据不能写死，就需要父传子。

父传子的语法：

子组件通过defineProps( )接收自己需要的数据，进而使用数据。（子接）
父组件内，子组件的自定义标签上，通过自定义属性传递数据。（父传）

子组件

这里数组的名字自定义，不是固定的。

<script setup>defineProps(['imgUrl','title','price'])
</script>

父组件

<script setup>import MyGoods from './components/MyGoods.vue'//父组件提供的数据const goodsObj={id:'123456',name:'kkk',price:150,picture:'https://test.com'}
</script>
<template><MyGoods :imgUrl="goodsObj.picture"/>
</template>

总结

子接：defineProps(['数据名称1'，'数据名称2'])
父传：自定义属性名="值"

子传父

当子组件需要修改父组件的数据（props接收的数据是只读的，不能修改），就需要使用子传父。

而子传父的的语法是：

父组件提供修改数据的方法/函数,并在子组件的自定义标签上，绑定自定义事件。
子组件在恰当的时机，触发/调用父组件修改数据的方法/函数。

子组件

<template><button @click="onCut">砍价</button>
</template><script setup>import { ref } from 'vue'const props=defineProps(['imgUrl','title','price','idx'])//拿到触发自定义事件的函数 emitconst emit=defineEmits()//定义子组件砍价按钮,emit传入父组件给出的修改函数，和需要的参数const onCut=()=>{emit('ccc',props.idx,1)}
</script>

父组件

<template><MyGoods @ccc="subPrice"/>
</template><script setup>import MyGoods from './components/MyGoods.vue'const subPrice = (i,price) => {goodsList.value[i].price -= price}
</script>

总结

父监听/绑定：@自定义事件="父修改数据的函数"
子触发/通知：emit('自定义事件'，传递的参数.....)

非父子组件通信

祖先传后代

作用：实现跨层级数据传递

语法

祖先组件提供数据

provide('数据名称',数据)

示例：

<script setup>import {ref,provide} from 'vue'const money=ref(1000)provide('money',money)
</script>

后代组件获取数据

const 数据=inject('数据名称')

示例：

<script setup>import {ref,inject} from 'vue'const money=inject('money')
</script>

任意两个组件通信

EventBus可以实现任意两个组件通信，但是使用较为麻烦，能不使用，便不使用。

步骤

前提：需要一个中间者（媒婆）

创建一个中间者模块
确定消息的发送方，中间者.emit（'事件名称',数据）
确定消息的接收方：中间者.on('事件名称',(数据)=>{ })

中间者采用第三方模块mitt，步骤如下：

1、安装mitt

npm install --save mitt

2、与App.vue同级，创建一个eventBus.js文件，在这创建一个中间人并导出

import mitt from'mitt'//创建中间人
const meipo=mitt()//默认导出：目的是给其他组件可以拿到meipo这个中间人
export default meipo

3、发送方

<template>
<div><button @click="onSend">Send</button>
</div>
</template><script setup>import {ref} from 'vue'import meipo from "../eventBus.js"const msg=ref('12345678')const onSend=()=>{meipo.emit("sendMsg",msg.value)}
</script>

4、接收方

<script setup>import {ref} from 'vue'import meipo from "../eventBus.js"meipo.on('sendMsg',(msg)=>{console.log(msg.value)})
</script>

Props校验

props是什么

如上面父子组件通信时使用到的，绑定在组件标签上的自定义属性，就是props

<MyGoods :imgUrl="goodsObj.picture"/>

作用

当我们在进行props传属性值时，可能会出现类型不匹配之类的情况，因此我们需要为prop指定验证要求，不符合要求，控制台就会有错误提示，以此来提高代码的健壮性。

换句话说，子组件接收的是什么样的props，那么父组件在传递的时候也必须按照这个规则来传递，双方都得遵守的一种协议。

语法

1、数组接收法：

defineProps(['imgUrl','title'])

优点：简单、上手快。
缺点：无法对接收的props进行校验，健壮性差。

2、对象接收法（简易写法校验，只校验类型）：

defineProps({

title:String

imgUrl:String

})

优点：可以对props做校验，健壮性相对好点。
缺点：写法相对复杂些。

3、完整写法校验

简易写法的校验只能验证数据类型，在某些情况下可能需要要求数据必须传等条件，此时简易写法便不能满足要求。

语法

defineProps({

属性名:{

type:Number, //数据类型约束

default:50, //默认值，与required:true冲突，如果同时出现，required优先级更高

required:true/false //是否必须传值，默认不是必须传值

}

})

但是如果需要校验数据的范围，此时上述的方法便无法满足要求，就需要使用自定义校验函数

defineProps({

属性名:{

type:Number,         //数据类型约束

default:50, //默认值，与required:true冲突，如果同时出现，required优先级更高

required:true/false //是否必须传值，默认不是必须传值

            validator(value){

          //value是实际props传递的值

        if(value<0)

          {

                                console.error("!")

        return fasle

         }

        return true

                }

        }

})