樣式表最終的生成位置

有兩個元件，一個是根元件App，一個是子元件Users。它們都有一個h2標籤，先只在根元件上寫CSS樣式。

App.vue

<template>
  <div id="app">
    <h2>父元件的h2標籤</h2>
  </div>
</template>

<script>
  import Users from './components/Users'

  export default {
    name: 'App',
    components: {
      "users"
 
: Users
    }
  }
</script>

<style>
  h2 {
    color:purple;
  }
</style>

Users.vue

<template>
  <div class="users">
    <h2>子元件的h2標籤</h2>
  </div>
</template>

<script>
  export default {
    name: "Users"
  }
</script>

<style>
 


</style>

執行結果

分析

可以看到生成的HTML中有兩個style標籤樣式表，其中第一個樣式表中的就是父元件的樣式。第二個樣式表是子元件的樣式，現在是空的。

如果為子元件新增樣式：

<style>
  h2 {
    color: green;
  }
</style>

那麼這兩個h2標籤就都是綠色的了，因為子元件的樣式表在靠後的位置，對於衝入的樣式會覆蓋掉父元件的樣式。

使用scoped限制樣式作用域

當為兩個元件都設定scoped後，即：

<style scoped>
  //...
</
 
style>

它們就都互不干擾了，這個scoped也就是限制裡面的樣式只圍繞自己當前這個元件。所以結果就是：

可以看到Vue為兩個元件的內容打上了不同的屬性，而在樣式表中使用屬性選擇器來選擇限制選擇的標籤：

另外注意到巢狀的子元件的容器本身也具有了父元件的屬性標識，但裡面的標籤就不再具有了。也就是說當使用了scoped，子元件中除了根容器本身之外的其它標籤都不會繼承父元件的樣式。