Vue踩坑之旅（三）—— 修改子組件樣式

在vue組件中爲 <style> 標籤開啓 scoped 屬性，這樣樣式只做用於這個組件，而不會污染其餘組件。

在項目中，咱們常常要引入外部的 UI 組件（如 elementUI、mint-ui），可是在父組件中添加 scoped 屬性後，父組件的樣式將不會滲透到子組件中，因此在父組件中書寫子組件的樣式是無效果的。

下面有幾種方法來修改子組件樣式：

1. 去掉 scoped

在父組件的 <style> 中去掉 scoped 後，父組件中能夠書寫子組件的樣式。但這樣會污染別的組件中的樣式

2. 混用本地和全局樣式

你能夠在一個組件中同時使用有做用域和無做用域的樣式：

<style lang="sass" scoped> /* 本地樣式 */ </style>
<style lang="sass"> /* 全局樣式 * 修改子組件樣式，最好在子組件外嵌套一個類 */ </style>
複製代碼

3. 深選擇器

若是你但願 scoped 樣式中的一個選擇器可以做用得「更深」，例如影響子組件，你能夠使用 >>> 操做符：

<template>
  <div id="app">
    <my-header></my-header>
  </div>
</template>

<style scoped> .myHeader >>> .title { color: red; } </style>
複製代碼

<div class="myHeader">
  <div class="title"></div>
</div>
複製代碼

有些像 SASS 之類的預處理器沒法正確解析 >>>。這種狀況下你能夠用 /deep/ 操做符取而代之 —— 這是一個 >>> 的別名，一樣能夠正常工做。

<style scoped> .myHeader /deep/ .title { color: red; } </style>
複製代碼

這樣的寫法及修改了子組件的樣式，又不會污染全局樣式！

注意：經過 v-html 建立的 DOM 內容不受做用域內的樣式影響，可是你仍然能夠經過深度做用選擇器來爲他們設置樣式