vue scoped样式穿透,vue样式穿透原理
主要介绍vue风格渗透的几种方式，通过实例代码详细介绍，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
限定范围的属性样式渗透概要
scoped属性
我们通常在vue组件的样式标签中编写样式，但是我们这里的样式默认是全局的。如果其他组件的类名重复，会导致样式污染。
所以vue支持在style标签中添加scoped属性，这样当前组件的样式只在当前样式中生效，其他组件不受影响。
例子如下：
div class=page
你好，世界
/div
style lang=scss 作用域。页面{。内容{
颜色：海蓝宝石；
字体大小：20px
}
}/样式
在最终的浏览器渲染中，div和span具有特殊的属性。
然后css的样式最终会带这些属性，根据这些属性找到元素。
这样，风格的全球性污染就可以避免了。
如果你已经引入了第三方库，想要修改第三方库的样式，可以直接通过dom查找，修改样式是没有用的。
例如，我在项目中引入了hungry组件库elementUI。
电子贺卡class=盒卡
你好，世界
/电子名片
如果我们想让填充变小，下面的写法就没有效果了。
style lang=scss 作用域。盒子卡{。el-card__body {
填充：10px
}
}/样式
仅查看默认填充。我们写的样式没有渲染。
此时需要样式穿透，需要深度选择器/deep/。
style lang=scss 作用域。盒子卡{
/深/。el-card__body {
填充：10px
}
}/样式
你可以看到它在工作。
样式穿透
深度选择器穿透Vue。除了上面的/deep/，我比较熟悉的还有：v-deep，
那么它们之间有什么区别呢？
如果使用css而没有css预处理器，可以使用，/deep/，v-deep。如果使用的是less或者node-sass，可以使用/deep/，并且：v-deep可以生效。如果你用的是dart-sass，那么就不能用/deep/，要用：v-deep才能生效。
总结
总而言之：
可以使用Css，/deep/，可以使用v-deepless和node-sass/deep/，可以使用v-deep dart-sass:v-deep。就是这样。本文介绍了vue风格渗透的几种方式。更多关于vue风格渗透的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。