vue3中的:deep()深度选择器

今天看到这篇文章被GitCode收录，才发觉原来::v-deep已经被废弃了，以前辛苦学习的时光还历历在目，如今却已是时过境迁。所以更新一下文章，防止误导他人。

1.什么是深度选择器？

scoped 属性是HTML5中的新属性，<style>标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器:v-deep。

2.举个栗子

在<style>中加了scoped属性后，子组件的内部元素不会自动增加 data-v-xxxx属性，我们直接修改element按钮里的文字样式时，这样写并不能生效，除非去掉scoped。

<template>
        <el-row class="mb-4">
            <el-button>按钮</el-button>
        </el-row>
</template>

<style lang="scss" scoped>
.el-button>span {
    color: red;
}
</style>

使用:deep，即可解决这个问题

<template>
        <el-row class="mb-4">
            <el-button>按钮</el-button>
        </el-row>
</template>

<style lang="scss" scoped>

:deep(.el-button>span) {
    color: red;
}

</style>

 

以前的写法，现在已不支持：

>>> .el-button>span {
    color: red;
}

::deep(.el-button>span){
    color:red;
}

不支持的写法会报错：