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;
}

不支持的写法会报错：

到此这篇关于vue3中的:deep()深度选择器的文章就介绍到这了,更多相关vue3 :deep()深度选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！