Vue 组件的<style>中设置 scoped 遇

在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。
但是 我们需要注意的是：如果我们添加了子组件，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的样式。若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式。
如果想让每个组件中都有一个公共的.page类，是必须在App.vue中设置的，App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。
另外值得注意的一点是，如果使用了less,sass 的@mixin，然后做了一个 .minin.scss的公共文件，是不能单独放在App.vue中的，每个使用了的组件都需要单独引入。

App.vue

<style lang="scss">
  // 不加scoped
  // 公共样式放在这里
  @import 'src/css/common';
  // @import 'src/css/mixin'; 这个不能单独放在这里
  // ...
</style>

感谢浏览，欢迎评论指正，相互学习，转载请标明出处。

参考 在vue组件中style scoped中遇到的坑