vue3中的:deep()深度选择器详解
更新时间：2024年10月26日 10:10:54 作者：龙井>_<
本文讲述了"v-deep"深度选择器被废弃的情况,作者提醒读者更新知识库,避免误导他人,深度选择器是HTML5的新属性,用于实现组件私有化和防止样式污染,如果想让样式中的一个选择器作用得更深,可以使用深度选择器,但现在,以前的写法已不再支持,需要调整方法
今天看到这篇文章被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()深度选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了vue保存自动格式化换行，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue3异步组件Suspense的使用方法详解,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue模式history下在iis中配置流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了VUE中的filters过滤器使用方法，文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载 、组件过滤器展开内容，具有一定的参考价值组要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了Vue实现户籍管理系统户籍信息的添加与删除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件,所以这篇文章主要给大家介绍了关于vue+echarts图表使用的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue动态扩展表头的表格及数据方式(数组嵌套对象)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了基于VUE实现的九宫格抽奖功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论