Vue 组件里这个样子

    我在做记账项目的时候发现，在父组件中的 stype 标签写了 scoped，但还是会影响子组件，于是找原因，找找找，发现了奥秘。

    看一下写的 CSS 代码

    • 在父组件上给 class=wrapper 的标签加样式
    1. // 父组件 Father
    2. <template>
    3.     <div class='wapper'>
    4.       I'm father.
    5.       <Son />
    6.   </div>
    7. </template>
    8. <style scoped>
    9.     .wrapper{
    10.       background:red;
    11.   }
    12. </style>
    14. // 子组件 Son
    15. <template>
    16.     <div class='wapper'>
    17.   I'm son.
    18.   </div>
    19. </template>

    这会作用到 Son 组件，效果如下：
    image.png

    原因是这样的，画一个示意图理解一下

    • 在 Father 中，Son 内容是照搬过来的
    • 所以 Father 的 scoped 能够影响 Son 的最外层的任意一个标签
    • 这影响的仅仅是最外层，因为 scoped 限定作用

    image.png

    「@浪里淘沙的小法师」