【Vue】scoped+组件通信+props校验

【scoped作用及原理】

【作用】

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

故而可以给组件加上scoped 属性， 令样式只作用于当前组件的标签

作用：防止不同vue组件样式污染

【原理】

给组件加上scoped 属性后， 组件发生如下变化：

1. 组件内所有标签都被添加了一个名为data-v-xxxx(八位随机字符串) 的自定义属性(因此， 每个组件生成的这个属性名都各不相同)

2. scope会用这个属性构成属性选择器， 配合程序员编写的选择器， 形成了一个交集选择器

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

【组件通信】

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

组件化开发中，通过代码拆分和组合化作一系列组件的方式进行开发，这种情况下，组件之间难免需要数据传递，这就需要组件通信

因此， 需要辨别两个组件之间的关系， 从而选择不同的组件方案

【父子组件】

父传子： props自定义属性

子传父： emit自定义事件

【非父子组件】

1.祖先与后代： provide（） + inject（）

2.兄弟组件： eventBus()

【如何辨别关系】

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

【父传子原理】

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

【子传父】

props是只读的，子组件不能修改父组件传递的数据，

因此可以通过emit方式， 通知父组件，父组件收到通知后自行修改 

图中子传父流程：

1.父组件通过点击砍一刀按钮， 执行onCut函数, onCut函数调用emit方法， emit触发子组件的ccc自定义事件

2.ccc事件触发subPrice函数， 并获得emit方法传过去的值用于subPrice的参数， 从而成功执行砍一刀功能

【props校验】

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示，帮助开发者快速发现错误

语法：

也可以写成完整写法， 达成一些更复杂的需求

【组件的 ref/reactive 与props 的区别】

共同点

都可以给组件提供数据

区别

 1.ref/reactive 的数据是组件自己的 → 随便改， 可读可写

2.prop 的数据是外部的， 是父组件提供的 → 不能直接改，遵循单向数据流原则， 子组件若想改， 需要用到子传父的通信规则

单向数据流： 子组件的props数据来源于父组件， 当父组件数据改了， 会影响子组件的props，这个方向只能是父 --> 子