vuejs深度作用选择器

在vue项目开发中，有时候会遇到使用公用组件时，需要进行小幅度的变动，这个时候在公用组件上更改会比较麻烦，因为其他的地方还会用到这个组件，这个时候Vue就提供了一个解决方案.

如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/或::v-deep操作符取而代之——两者都是>>> 的别名，同样可以正常工作。
下面是一个实际的例子

<template>
    <Layout>
        <Types class="公用组件"/>
    </Layout>
</template>

<script lang="ts">
    import Types from '@/components/Money/Types.vue';

    export default {
        name: 'Statistics',
        components: { Types },
    };
</script>
 //穿透选择 在原有的基础上进行修改 不会对元组件造成影响 
<style scoped lang="scss">
    .公用组件 ::v-deep li {
        border: 1px solid red; 
        }
</style>

image.png

更改后 ：

image.png