vue scoped，子組件的根節點依然受其父組件的CSS 的影響

vue scoped，子組件的根節點依然受其父組件的CSS 的影響

vue-loader文檔

我們都知道，vue scoped 的作用是避免 css 全局作用域的影響

以下截圖來自vue-loader 官網頁面對scoped css 原理的介紹

 

  官網文檔上也說明了子組件根元素會受到父組件同名css樣式影響，截圖如下

文檔中提到，子組件根節點樣式會受到父組件樣式影響，這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式。

但是，現在，我不希望子組件根元素樣式受到父組件影響，怎么做呢？

我們先來看一下，具體是怎么相互影響的呢？

父組件

<template>
  <div class="root">
    <span>父組件</span>
    <child-component></child-component>
  </div>
</template>

<script>
import Child from "./child";
export default {
  components: {
    "child-component": Child
  }
};
</script>

<style scoped>
.root {
  color: green;
  padding: 40px;
}
</style>

父組件中給根元素添加字體綠色和 padding 間距

子組件

<template>
  <div class="root">
    <span>子組件</span>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.root {
  background-color: red;
}
</style>

子組件只添加了背景色紅色

結果

結果顯示子組件被額外添加了 padding 樣式（這非預想設計的樣式）

 分析

本來子組件中我們通過 .root 給了背景色樣式為紅色，但是在父組件中由於我們意外給了一個同名 .root 樣式，導致我們給子組件額外添加了padding間距（注：字體色理論上由於繼承關系也會顯示為綠色，我們暫不考慮這個）。

原因，因為父組件的生成的唯一標識 'data-v-a83bd3b0' ，也會給子組件根元素加上這個標識，巧合的是，子組件根元素具有 .root 的選擇器，剛好使得  .root[data-v-a83bd3b0] 生效。

即使得該樣式生效了

通過以上分析，我們知道，以上問題（樣式干擾）由兩個條件產生：

　　①，父組件唯一標識符屬性 data-v-id 也會被添加到 子組件根元素上

　　②，子組件根元素上具有和父組件同名class

解決問題方案（解決原理是將上述任意一個條件使得它不成立，那么問題就不會產生啦）

方案一，避免父組件使用和子組件根元素同名 class（往往很難避免，還需要頁面調試查看子組件根元素className）

方案二，給子組件根元素添加一層 div，不添加 class樣式（這樣的話，父組件生成的data-v-id 便會在該div上，從而使得）推薦

如圖使用方案二，這樣就避免啦問題

 

vue插槽內的樣式沖突問題

vue插槽打包之后，插槽中的所有內容，均會被打上組件唯一標識id，若在插槽中存在和提供插槽組件存在同名class樣式，也會產生沖突問題。如下圖所示

 

 目前解決方案，如圖中所示，換一個不同名字的class名字

 

 

@萍2櫻釋ღ( ´･ᴗ･` )