深入探讨scoped属性

小蓝 • 2024-12-07 17:49 • 编程

一、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元素生效。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/206082.html