修改vue子組件樣式不生效？請使用/deep/選擇器

爲何修改vue子組件樣式不生效

設置了scoped屬性後，父組件的樣式沒法滲透到子組件裏面。

<div data-v-abc>
    <Tab></Tab>
</div>

scoped的原理

我理解爲給樣式添加一個做用域，一個標識。

轉義前的代碼：
<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>
轉譯後：
<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

怎麼解決樣式不生效的問題

使用深度選擇器來寫使樣式生效。
有兩種寫法：

1. .a >>> .b {}
2. .a /deep/ .b

當你子組件使用了 scoped 但在父組件又想修改子組件的樣式能夠 經過 >>> 來實現：

<style scoped>
.a >>> .b { /* ... */ }
</style>

將會編譯成
.a[data-v-f3f3eg9] .b {
  /* ... */
}

什麼是/deep/深度選擇器

傳送門