19、scoped样式冲突
（1）默认情况：写在组件中的样式会全局生效，因此会很容易造成多个组件之间的样式冲突问题。
1）全局样式：默认组件中的样式会作用到全局
比如：
当只有box1设置边框时，却出现都有边框的情况
2）局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件
给box1加上scoped后
结果：
（2）scoped原理：
1）当前组件内标签都添加data-v-hash值的属性
2）css选择器都被添加data-v-hash值的属性选择器
3）最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到
4）示例：
20、data是一个函数
一个组件中的data选项必须是一个函数。这可以保证每个组件实例，维护独立的一份数据对象。（每次创建新的组件实例，都会执行一次data函数，得到一个新对象）
比如：
当一个组件在根组件里多次使用时，该组件中的某一项数据值被使用多次，修改该值其中一个值，而不影响该值在其他地方的数值
21、组件通信
组件的数据是独立的，无法访问其他组件的数据，如果想用其他组件的数据，需要使用组件通信
（1）概念
组件通信就是指组件与组件之间的数据传递
（2）组件之间的关系
父子关系和非父子关系
（3）组件通信解决方案
1）父子关系（props和$emit）
①父传子
在父组件里：
在子组件中：
效果：
②子传父
子组件利用$emit通知父组件，进行修改更新
比如：
修改父传子的值
效果：
点击修改标题后
2）非父子（看23、24）
Provide和inject或eventbus
通用解决方案：Vuex（适合复杂业务场景）
22、props详解
（1）prop概念
组件上注册的一些自定义属性
（2）prop作用
向子组件传递数据
（3）特点：
1）可以传递任意数量的prop
2）可以传递任意类型的prop
（4）props校验
1）作用
为组件的prop指定验证要求，不符合要求，控制台会有错误提示；版主开发者快速发现错误
2）语法
简单写法
完整写法：
①类型校验
②非空校验
③默认值
④自定义校验
（5）prop与data、单项数据流
1）prop与data（谁的数据谁负责）
共同点：
①都可以给组件提供数据
区别：
①data的数据是自己的，可以随便改
②prop的数据是外部的，不能直接修改，要遵循单项数据流
2）单项数据流
父级prop的数据更新，会向下流动，影响子组件。这个流动是单向的。
23、非父子通信-event bus 事件总线
（1）作用：非父子组件之间，进行消息传递。（复杂场景，用vuex）
（2）步骤：
1）创建一个事件总线，导出Bus实例
2）发送方，触发Bus实例
①导入Bus实例
②通过$emit触发
3）接收方，监听Bus实例
①导入Bus实例
②通过$on接收消息
（3）示例：
24、非父子通信-provide-inject（拓展）
（1）作用：跨层级共享数据
（2）父组件提供数据，子/孙组件接收数据
（3）数据可以是普通类型（非响应式），也可以是复杂类型（响应式）
1）非响应式
如上图的num
2）响应式
如上图的userInfo