scoped的深入理解

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

2. 父組件設置scoped，子組件設置scoped，父子組件的樣式相互不影響。

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

3. 父組件不設置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;
}

此時生效的是父元素中設置的樣式（父元素的樣式權重更高），即此時並不符合上述的第二條規則，其作爲一個特例。