脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 :deep()深度选择器

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如何使用moment处理时间戳转换成日期或时间格式

    vue如何使用moment处理时间戳转换成日期或时间格式

    这篇文章主要给大家介绍了关于vue如何使用moment处理时间戳转换成日期或时间格式的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • 深入理解vue3中的reactive()

    深入理解vue3中的reactive()

    本文主要介绍了深入理解vue3中的reactive()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue多层嵌套路由实例分析

    vue多层嵌套路由实例分析

    这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vuex2中使用mapGetters/mapActions报错的解决方法

    vuex2中使用mapGetters/mapActions报错的解决方法

    这篇文章主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-10-10
  • vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下
    2024-04-04
  • elementUI自定义上传文件功能实现(前端后端超详细过程)

    elementUI自定义上传文件功能实现(前端后端超详细过程)

    自定义上传思路很简单,下面这篇文章主要给大家介绍了关于elementUI自定义上传文件功能实现(前端后端超详细过程)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3 去除 vue warn 及生产环境去除console.log的方法

    Vue3 去除 vue warn 及生产环境去除console.log的方法

    这篇文章主要介绍了Vue3 去除 vue warn 及生产环境去除console.log的方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue计算属性+vue中class与style绑定(推荐)

    vue计算属性+vue中class与style绑定(推荐)

    这篇文章主要介绍了vue计算属性+vue中class与style绑定,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-03-03
  • web前端vue filter 过滤器

    web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。本文给大家介绍了web前端vue filter 过滤器的相关知识，感兴趣的朋友一起看看吧
    2018-01-01
  • 用v-html解决Vue.js渲染中html标签不被解析的问题

    用v-html解决Vue.js渲染中html标签不被解析的问题

    这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12

最新评论