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>

初始样式:

Vue在父组件中改变子组件内的某个样式

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>

修改成功后的样式:

Vue在父组件中改变子组件内的某个样式

如果是有些像Sass、less之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。如下: 

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

上述方法只针对于子组件内部的样式

 

上一篇:02,定义一个vue 文件作为一个组件


下一篇:centos6.5 搭建php5.5+mysql5.5+apache2.4