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中遇到的坑

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 128,865评论 19 550
  • c语言中,有指针传递,可以通过指针操作内存的数据,如交换变量的值可以这样 输出结果:6,56,5 但是Java中没...
    lemonTreeTop阅读 61评论 0 1
  • 中式英语(Chinglish)大多是在汉语的语义上,通过合理的构词法等法则转换到英语的,这使得在其他英语使用者看来...
    GroupUp学习团阅读 94评论 0 0
  • 《夜》 树叶偷偷望着月光下的花儿 小鸟期待着下个黎明 麦田随风轻轻舞蹈 我在云间 梦伴我飞翔
    岁月里的拾穗人阅读 16评论 1 1
  • 晚上下班回到家,宝宝想让我陪他玩儿。 “爸爸,你陪我看会儿托马斯吧!我好想看托马斯啊!你就陪我看一会儿就行。……”...
    格桑菩提子阅读 29评论 0 0