默认情况下样式是全局样式,会造成多个组件之间的样式冲突,
若想是局部样式,就要加上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]