scoped的深入理解

一时失言乱红尘 2022-04-11 11:58 251阅读 0赞

#### scoped 属性 ####

作用：保证css样式只作用于当前组件，不会影响其他任何地方的样式。

本质：设置 scoped 后，当前组件中的所有元素都会被添加一个 data-v- 的属性，所有设置的css样式都会添加该属性选择器。

如：

// 权重为 1 + 10
    input[data-v-656039f0] {...}

// parent.vue
    <div>
        <input />
        <child></child>
    </div>
    
    // child.vue
    <div>
        <input/>
    </div>

规则：

1.  父组件设置scoped，子组件不设置scoped，父组件的样式不会影响到子组件，但如果子组件的css样式权重高于父组件则会影响父组件的样式。

// 父组件
    input[data-v-656039f0] {
        background-color: red;
    }
    // 子组件
    input {
        background-color: skyblue !important;
    }
    // 显示效果: 全为 skyblue

1.  父组件设置scoped，子组件设置scoped，父子组件的样式相互不影响。

// 父组件
    input[data-v-656039f0] {
        background-color: red;
    }
    // 子组件
    input[data-v-c22e20c8] {
        background-color: skyblue !important;
    }
    // 显示效果: 父input：red 子input：skyblue

1.  父组件不设置scoped，子组件设置scoped，子组件的样式不会影响父元素，但如果父组件的css样式权重高于子组件则会影响子组件的样式。

// 父组件
    input {
        background-color: red !important;
    }
    // 子组件
    input[data-v-c22e20c8] {
        background-color: skyblue;
    }
    // 显示效果: 全为 red

特殊情况：

父组件设置了scoped，其data-v会作用在子组件的根元素上，如果此时子组件也设置了scoped，那么此时子组件的data-v也会作用在该根元素上，就会导致存在两个不同的data-v作用在子组件的根元素上。

如下：

// parent.vue
    <template>
        <div>
            <p>parent</p>
            <child></child>
        </div>
    </template>
    
    // child.vue
    <template>
        <div class="child">
            <p>child</p>
        </div>
    </template>

// 渲染后的 html 结构
    <div data-v-656039f0>
        <p data-v-656039f0>parent</p> 
        <div data-v-c22e20c8 data-v-656039f0 class="child">
            <p data-v-c22e20c8>child</p>
        </div>
    </div>

此时设置以下样式：

// parent.vue
    .child {
        border:1px solid skyblue !important;
    }
    
    // child.vue
    .child {
        border: 1px solid red;
    }
    
    // 编译后：
    .child[data-v-656039f0] {
        border:1px solid skyblue !important;
    }
    .child[data-v-c22e20c8] {
        border:1px solid red;
    }

此时生效的是父元素中设置的样式（父元素的样式权重更高），即此时并不符合上述的第二条规则，其作为一个特例。