vue中style后面的scoped的作用

笼统点说,scoped 修饰的style只给当前组件内的元素使用,而通过slot插槽插进来的元素,scoped就管不到了。

本质上,scoped做了两个事情

1.给当前组件中的所有元素,添加一个随机的属性
2.给当前组件中的所有元素的样式添加一个对应的随机属性选择器

PS:如何在有scoped的时候,影响slot元素样式呢?

使用深度选择器
在scss下使用:

      // 深度选择器 scss ::v-deep  less /deep/  css >>>
      ::v-deep .zhf-button:first-child {
        margin-right: 20px;
      }

那深度选择器是怎么实现这个效果的呢?

其实就是元素增加样式的时候,没有添加对应的属性选择器

原文地址:https://www.cnblogs.com/zhenhunfan2/p/13879376.html