vue样式穿透
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue样式穿透相关的知识，希望对你有一定的参考价值。
参考技术A vue的style中设置scoped属性后，组件实现样式私有化。但是该组件又使用的其他组件库时(vant,elementui,自定义等)，该组件的style中的样式，优先级低，不生效，这个时候需要使用样式穿透(作用得更深)。
通过图片可以看到scoped底层是通过在 DOM节点 中添加 data-v-xxx ， CSS 中通过添加 [data-v-xxx] 属性过滤，提高优先级，来实现样式的私有化。
看一个场景实例：子组件根元素颜色为 红色 ，非根元素为 蓝色 。
父子两个组件 style 都使用 scoped 属性，在不修改子组件的前提下，在父组件上修改子组件的颜色为 绿色 。
当加上样式穿透后
vue 中针对不同的样式类型( css , less , scss )有不用的样式穿透方法。
vue3实现样式穿透
在vue2中可以直接使用 /deep/来穿透样式
在vue3里面可以用过 :deep 来穿透样式
以上是关于vue样式穿透的主要内容，如果未能解决你的问题，请参考以下文章