vue中使用/deep/失效的解决方法

1. 若是没有使用像less, sass等这样的css预处理器， 那么是只能使用 >>>这样的css深度选择器

<style scoped>
  .box >>> el.dialog {

  }
</style>

2. 若是使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep

<style scoped lang="scss">
  .box /deep/ el.dialog {

  }
</style>

或

<style scoped lang="scss">
  .box ::v-deep el.dialog {

  }
</style>

3. 如果使用了css预处理器，使用/deep/ 和::v-deep 都失效，那么需要看看style 上是不是没有加上 scoped。若加上了还是无效，那么就只能把代码写入全局css中了，但是需要注意用一个css类包裹起来，不然会改变很多全局样式。

<style>
.box .el-dialog {

}
</style>

或

<style lang="scss">
.box .el-dialog {

}
</style>

到此这篇关于vue中使用/deep/失效的解决办法的文章就介绍到这了,更多相关vue /deep/无效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue scoped及deep使用方法解析

    众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被

  • vue2.0 watch里面的 deep和immediate用法说明

    deep,默认值是 false,代表是否深度监听. immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行. computed: { btnObj() { const { sign_img, check } = this return { sign_img, check } } }, watch: { btnObj: { handler: function(newVal,oldV

  • vue中watch监听器用法之deep、immediate、flush

    目录 一.watch 默认是浅层,使用deep深层监听 二.watch 默认是懒侦听,使用immediate即时回调侦听 三.回调的刷新时机flush: 'post' 四.this.$watch() 五.停止侦听器 总结 一.watch 默认是浅层,使用deep深层监听 被侦听的 property,仅在被赋新值时,才会触发回调函数——而嵌套 property 的变化不会触发.如果想侦听所有嵌套的变更,你需要深层侦听器:设置deep: true export default { watch: {

  • Vue3样式渗透之deep()为什么无效详解

    Vue3样式渗透之deep()为什么无效详解

    今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习. :deep()的使用场景: 如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的.如果想让某些样式对子组件生效,则需要使用:deep(). 我原本觉得这个没有难度,于是写了个案例来验证.然后问题出现了,:deep()定义的样式在子组件中不起作用.我开始找错,把包括冒号.括号在内的语法格式等都检查了一遍,发现语法格式没有问题,控制台也

  • vue样式穿透 ::v-deep的具体使用

    之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用.直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式.想了好多方法,都没得到很好的解决. 百度之后发现 可以用 /deep/或::v-deep来解决***(不过在vue3.0的环境下,使用/deep/时,编译会报错)***.没想

  • Vue中对watch的理解(关键是immediate和deep属性)

    Vue中对watch的理解(关键是immediate和deep属性)

    目录 watch是什么? watch的使用 watch是什么? watch:侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. watch的使用 watch基础语法 watch: {     被监听的数据: {         handler(数据改变后的值, 数据改变之前的值) {             相关代码逻辑...         }     } } 被监听的数据:data中定义的数据: 数据改变后的值:该数据改变后

  • vue中使用/deep/失效的解决方法

    1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器 <style scoped> .box >>> el.dialog { } </style> 2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep <style scoped lang="scss"> .box /deep/ el.dialog { }

  • 基于vue中keep-alive缓存问题的解决方法

    vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用

  • vue中常见的问题及解决方法总结（推荐）

    vue中常见的问题及解决方法总结（推荐）

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • layui 中select下拉change事件失效的解决方法

    layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter="test" <select lay-filter="test"></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 co

  • swiper在angularjs中使用循环轮播失效的解决方法

    bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类

  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法 通过全局安装vue-cli npm install --global vue-cli 在cmd中运行vue提示不是内部命令,原因是环境变量没有加上 找到npm的位置:(不在这个位置的全局搜索vue.cmd即可) C:\Users\Administrator\AppData\Roaming\npm 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置,保存,重启cmd命令工具即可

  • thinkPHP使用post方式查询时分页失效的解决方法

    thinkPHP使用post方式查询时分页失效的解决方法

    本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

  • PHP利用header跳转失效的解决方法

    本文实例讲述了PHP利用header跳转失效的解决方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 今天header(\"Location: $url\"),以往跳转总是可以的,今天却不动,只是输出结果,以往自己要确认检查,$url的值获取的是否正确,所以在前面加了echo $url:来调试用,结果就导致了header函数的无效. 二.解决方法: 在PHP中用header("location:test.php")进行跳转要注意以下几点: 1.locatio

  • php多次include后导致全局变量global失效的解决方法

    本文实例讲述了php多次include后导致全局变量global失效的解决方法.分享给大家供大家参考.具体分析如下: 在多个文件中,文件一个接一个include,但最后一个文件里的函数使用global后却无法引用全局变量.例如: a.php文件: <?php $aa = 1; ?> b.php文件: <?php include a.php function show(){ global $aa; var_dump($aa); } ?> 显示:null; 这种失效是由于多种原因造成的

随机推荐