在vue項(xiàng)目開發(fā)中，有時(shí)候會(huì)遇到使用公用組件時(shí)，需要進(jìn)行小幅度的變動(dòng)，這個(gè)時(shí)候在公用組件上更改會(huì)比較麻煩，因?yàn)槠渌牡胤竭€會(huì)用到這個(gè)組件，這個(gè)時(shí)候Vue就提供了一個(gè)解決方案.

如果你希望 scoped樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用>>>操作符：

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

上述代碼將會(huì)編譯成：

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

有些像 Sass 之類的預(yù)處理器無法正確解析>>>。這種情況下你可以使用/deep/或::v-deep操作符取而代之——兩者都是>>> 的別名，同樣可以正常工作。
下面是一個(gè)實(shí)際的例子

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

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

    export default {
        name: 'Statistics',
        components: { Types },
    };
</script>
 //穿透選擇 在原有的基礎(chǔ)上進(jìn)行修改 不會(huì)對元組件造成影響 
<style scoped lang="scss">
    .公用組件 ::v-deep li {
        border: 1px solid red; 
        }
</style>

image.png

更改后 ：

image.png