Vue中使用style scope限定样式但是样式失效的原因

在vue中使用时，发现有的样式不能被修改，经查阅验证，记录如下：

  使用scope属性实际是在所用的组件上加了唯一标识符类似“[data-v-fa0c3847]”这样，虽然使用less的嵌套方式来写样式，但标识符只会加在被解析之后当前元素上。

在使用过程中发现，有时设置样式是没有效果的，经分析发现，scope只对当前页面直接使用的标签有效。

什么意思呢？一个vue文件，不管是HTML原生标签，还是使用了其他自己编写的组件，最终都是以标签形式展现的，如，如果在当前页面引入了MyComponent组件，那么标识符只会加在MyComponent组件的根标签上，那么，在当前页面下设置MyComponent组件内部元素的样式就是无效的。

比如MyComponent内部有个input标签，根据style解析规则，在当前页面设置input样式后会在input后加上标识符‘[data-v-fa0c3847]’，而实际上vue文件解析后，唯一标识符只会加在当前页面直接使用的标签MyComponent的根元素上，因此style解析后的input[data-v-fa0c3847]{...}这样的样式规则是匹配不到我们本意上要匹配的input元素的。这就是“某些”样式设置失效的原因。

如果非要为当前页面使用的组件的内部元素添加特殊样式的话，只能去掉scope属性再使用比较原始的方法限定css的作用域了，比如在当前vue文件的根元素上添加独特的类名，将所有样式写在该类下。