Vue在父組件中改變子組件內的某個樣式

手機項目中有個tabBar，不知道有什么好的實現辦法，自己的想法是把tabBar寫成一個組件

在哪個頁面，底部tabBar也需要顯示不一樣的樣式，由此就出來了，

Vue在父組件中改變子組件內的某個樣式

首先看父組件：

<template>
    <div class="cont">
        <footEr></footEr>
    </div>
</template>
<script>
    import footEr from '../../components/foot.vue'
        components: {footEr}
</script>    
<style scoped>
</style>

子組件：

<template>
    <div>
        <!-- 底部 -->
        <div class="footer">
            <div class="index">
                <p>菜單1</p>
            </div>
            <div>
                <p>菜單2</p>
            </div>
            <div>
                <p>菜單3</p>
            </div>
            <div>
                <p>菜單4</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

<style>
    .footer{
        border-top: 1px solid #999999;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 59px;
        padding-top: 6px;
        background: #FFFFFF;
    }
    .footer div{
        flex: 1;
        text-align: center;
        color: #808080;
    }
</style>

初始樣式：

style因為加了 scoper  只對當前組件起作用，那么直接在父組件中寫子組件的樣式是不會生效的

<template>
    <div class="cont">
        <footEr></footEr>
    </div>
</template>
<script>
    import footEr from '../../components/foot.vue'
        components: {footEr}
</script>    
<style scoped>
    .footer .index {
        color: #2a82e4;
    }
</style>

一種辦法是父組件中的style去掉scoped，這種辦法多半是不可取的，因為可能會影響全局樣式

第二種辦法就是深度作用選擇器( >>> 操作符)

<template>
    <div class="cont">
        <footEr></footEr>
    </div>
</template>
<script>
    import footEr from '../../components/foot.vue'
        components: {footEr}
</script>    
<style scoped>
    .cont >>> .index {　　　　/*cont是父組件包裹子組件的類名，index是子組件中要修改樣式的類名*/
        color: #2a82e4;
    }
</style>

修改成功后的樣式：

如果是有些像Sass、less之類的預處理器無法正確解析 >>> 。這種情況下你可以使用 /deep/ 操作符取而代之——這是一個 >>> 的別名，同樣可以正常工作。如下： 

<style scoped lang="scss">
.cont{
  /deep/ .index{
    color: #2a82e4;
  }
}
</style>

上述方法只針對於子組件內部的樣式

 

最新改為了 ::v-deep