Vue中的scoped属性

概述

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。

原理

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。

使用

但是，在开发时我们有时需要对公共组价的样式进行修改，而如果公共组件添加了scoped属性，就会导致它的样式不易（不可）修改，这在项目开发中会造成一定影响，所以正确的做法应该是：

• 1.给公共组件写样式时，不添加scoped，这样别的组件在引用它时才可以对它的样式进行调整。
• 2.给非公共的组件添加 scoped，这样它自己内部的样式、它对公共组件样式的修改，都仅仅是在本组件有效，而不会影响其他组件对公共组件的使用。

实践

在项目中，使用的是 vue + Element UI 的开发模式，而在使用 Element UI 框架时，常常需要对其原本的样式进行调整，如果我们在使用时直接在组件的 style 对其进行修改而没有加上 scoped，就会导致这个UI组件的样式被全局修改了，往后的使用自然是会受到影响的。或者是我先前使用改过这个 UI 组件，那么它有可能会对先前的样式进行覆盖，并且很难排查。所以，我们应该在每一个组件的 style 加上 scoped