《Vue 的CSS之deep语法》

介绍 | Vue Loader

vue-loader.vuejs.org/zh/guide/scoped-css.html

::v-deep

我们知道，在Vue组件的style标签里，加上scoped属性，会使写的样式只影响当前的组件，不会影响到子组件。

去掉scoped就可以了，但是去掉scoped同时也会导致其他问题，可能会影响到别的。

有什么方法能在父组件的css里影响子组件的样式，同时保留scoped呢？

deep有两种写法，::v-deep兼容性最强， 优先使用这个。

使用方法：在想要影响子组件的那个元素的选择器的前边加上::v-deep

//Statistics.vue父组件
<template>
   <Layout>
       <Type/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep li{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>

Type子组件里有ul和li元素，想要在父组件里改变它的样式，就在选择器前加::v-deep，表示深入到子组件里边找这个选择器。可以发现成功影响了自组件的样式。

可是如果子组件里有很多个li，或者li嵌套li，那只在外边说深入里边的li不准确。怎么精确的定位到子组件里的某个元素呢？

classPrefix 前缀

可以给子组件传一个prop，是classPrefix。在子组件里判断，如果外边给传了这个classPrefix，那某个元素就拥有了一个class，叫做"xxx-item",xxx是classPrefix变量的值。

然后在父组件的css里，就可以deep 这个加了前缀的选择器，就可以精准找到这个元素了。

给元素绑定class

给一个元素添加class可以使用&&，也可以使用对象形式。

<li :class="type==='-' && 'selected'" @click="selectType('-')">支出 </li>
 

如果前边的表达式为True，这个元素就拥有了后边的class。如果我这时再给它添加一个class绑定，会出错，不能同时有两个:class，所以升级使用对象

<li :class="{selected:type==='-', [classPrefix+'-item']:classPrefix}" @click="selectType('-')">支出 </li>

绑定的class是一个对象，里边是key-value。表示如果value表达式为真，我就拥有了key这个class。因为对象可以有很多个键值对，所以使用对象可以同时动态绑定多个class。

 

要绑定的第二个class，是xxx-item，xxx是父组件要给我传的一个prop。如果给传了，即如果classPrefix这个外部属性给传了，我就拥有了以它为前缀的一个class。可是这个classPrefix是一个变量，在这里使用${}插值不合法。有ES6的新语法：如果一个key里边有变量，就用[]把这个key包起来，里边用字符串相加的方式表达。

总结

在子组件的特定元素上绑定了classPrefix的类之后，在父组件的css里就可以deep 这个新加的class找到这个元素了。

<template>
   <Layout>
       <Type :type.sync="yyy" class-prefix="xxx"/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep .xxx-item{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>
复制代码

使用classPrefix在以下场景非常好用：一个父组件使用了多个一样的子组件，但是又需要不同的样式，就可以给不同的子组件传不同的classPrefix，那么里边的具体某个元素在不同的使用下就有独特的class。这样每个组件的样式都不互相影响。

 

转载：https://juejin.cn/post/6844904175147417613