【vue】scoped样式冲突

默认情况下样式是全局样式，会造成多个组件之间的样式冲突，

若想是局部样式，就要加上scoped属性

实践：

在根组件中用div包裹使用了两个局部组件

两个局部组件都定义了div样式

如果不加scoped属性的话 div里面的样式冲突

只产生了红色的边框样式

加了scoped属性之后

此时就能正常显示了

原理：

1.style中的样式 默认是作用到全局的

  2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式，推荐加scoped（原理）

  -----------------------------------------------------

  scoped原理：

  1.给当前组件模板的所有元素，都会添加上一个自定义属性

  data-v-hash值

  data-v-5f6a9d56  用于区分开不通的组件

  2.css选择器后面，被自动处理，添加上了属性选择器

  div[data-v-5f6a9d56]