您的位置:

深入探讨scoped属性

一、scoped属性的作用

当我们在Vue组件中编写CSS时,我们希望这些CSS只应用于该特定组件,以确保代码的可维护性和可重用性。这就是scoped属性的作用,它使得我们可以将CSS作用域限制在当前组件内部,避免污染全局的CSS样式.

二、前端scoped

类似于Vue组件中的scoped属性,前端也有一种scoped的概念,即只将某些样式作用于当前组件内部。在实际的开发中,我们可以使用BEM命名方式来限制CSS的作用域,以避免影响到其他组件。

三、scoped属性的原理

在Vue中,scoped属性的实现原理是使用CSS选择器的方式,将CSS规则缩小到vue组件内部。这样可以保证组件代码的可重用性,同时避免全局样式的污染。

    <style scoped>
      .example {
        color: red;
      }
    </style>
    
    <template>
      <div class="example">Hello World!</div>
    </template>

四、scoped原理

在Vue组件中,当组件装载时,Vue会自动添加一个唯一的标识符到组件的每一个CSS类名、ID和选择器中,同时Vue也会针对每个组件的样式,添加一个参数名和属性。

    <style scoped>
      .example {
        color: red;
      }
    </style>
    
    //在DOM结构中渲染的结果
    <div class="example" data-v-7fffdce2>Hello World!</div>

五、scoped属性的作用以及原理

scoped属性的作用和原理已经阐述清楚了,它可以解决CSS样式的命名冲突和污染全局样式表的问题,同时也避免了剪贴复制组件时样式的复制和重用问题。

六、CSS opacity属性(不)继承

在scoped的CSS规则中,不仅仅只有CSS属性会被限制在当前组件内部,有些属性还会被组件后代元素继承。比如,opacity属性就是一个继承属性,即使对其父级元素设置了opacity,子元素的opacity也会受到影响。

    <style scoped>
      .parent {
        opacity: 0.5;
      }
      .child {
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
    
    <template>
      <div class="parent">
        <div class="child"></div>
      </div>
    </template>

七、Vue scoped的作用

在Vue中,scoped属性与组件分离的实现方式,使得我们可以避免在全局命名CSS属性上花费太多时间和精力。同时,可以控制CSS规则的作用域,避免冲突和混乱。

    <template>
      <div class="main">
        <div class="child"></div>
      </div>
    </template>
    
    <style scoped>
      .main {
        background-color: yellow;
      }
      .child {
        background-color: red;
      }
    </style>

上述代码中,`.main`选择器只对当前组件中的div元素生效,`.child`选择器也只对当前组件中的div元素生效。