Vue04/Vue组件的样式冲突 scoped和style属性scoped原理说明(面试点)

一.组件的样式冲突 scoped

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

组件样式问题默认会作用到全局 就会影响到整个 index.html 中的 dom元素

全局样式: 默认组件中的样式会作用到全局

局部样式: 可以给组件加上 scoped 属性 可以让样式只作用于当前组件

二.scoped

1.scoped原理

  作用: 让组件的样式独立互不影响

（1）当前组件内标签都会被添加 data-v-hash值 的属性

  (2) css选择器都会被添加 [  data-v-hash值 ] 的属性选择器

最终效果: 必须是当前组件的元素 才会有这个自定义属性 才会被这个样式作用到

2.scoped原理和过程

（1）会自动给组件内标签 添加 data-v-hash值属性

（2）所有选择器都带上属性选择器

  (3) 给当前组件内所有的标签添加一个data-v-hash 的唯一标识 

  (4) 给当前style中所有的选择器添加一个属性交集选择器 确保所有选择器 只应用于当前组件的标签中

3.scoped 组件css作用域

(1) 默认情况下 如果子组件和父组件有相同的选择器样式 优选加载父组件 css样式

(2)如果希望子组件加载可以加载自己的样式 ，就可以使用 scoped组件 css作用域

面试点

1. scoped属性作用: 让子组件加载自己的样式(组件css作用域)

2. scoped属性原理: 让组件添加一个自定义属性 data-v-hash本质通过css属性选择器中增加权重