潍坊网站公司网络科技东莞正规网站建设
【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，这个方向只能是父 --> 子