vue学习day07-scoped样式冲突、data是一个函数、props详解、组件通信、非父子通信-event bus 事件总线

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