style标签上的scoped属性

vue中

在vue文件中的style标签上有一个特殊的属性：scoped(布尔值)；

<style scoped>
</style>

作用

该属性的作用是将当前标签下的样式私有化，仅对当前组件起作用

• 只管当前组件和子组件的最外层(不控制自组件)

原理

若是给style标签添加了scoped属性，在编译时

• 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义属性(例如: data-v-5558831a)来 唯一 标识这个dom 元素；
• 在每个css选择器中添加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
• 使得组件中的样式互不干扰；

缺点

虽然这样做保证样式只对当前组件起作用，不造成全局污染，但是于此同时
在我们使用第三方插件(eg:vant)的时候，想要修改其中的样式时—>若是我们写在带有scoped的style中时，默认会在选择器上加一个属性，这样就修改不到子元素的身上(无法修改子组件的样式)；

解决

[1]解决1—使用穿透 ::v-deep

• /deep/----存在兼容性(vue3打包的时候会报错)
• >>> —存在兼容性问题(scss使用会报错)
• ::v-deep—兼容性最好；

原理 ：去掉了该标签的属性选择器；

[2]解决2—在同一组件写两个style标签

• 一个加scoped只管当前页面；
• 一个不加scoped处理修改子组件样式的问题；

举例

 //在登录组件中使用vant的导航栏(自带padding，我们不需要，想要去掉)
    <template>
      <div class="login">
        <!-- 导航栏 -->
        <van-nav-bar>
          <template #left>
            <span class="iconfont icon44">&#xe637;</span>
          </template>
        </van-nav-bar>
      </div>
    </template>

   
    //使用穿透（本来不能修改子组件的样式，只要在选择器加上 ::v-deep 就可以修改了）
    <style lang='less' scoped>
       ::v-deep .van-nav-bar__left,
       ::v-deep .van-nav-bar__right {
        padding: 0;
      }
    }

uni-app

在使用uni-app时我们使用的是.vue文件进行代码编写的，style标签也存在coped属性

原理

在uni-app中添加scoped属性之后，在编译时

• 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义类名来 唯一 标识这个dom 元素；
• 在每个css选择器中添加一个当前组件的data类名来私有化样式，使得组件中的样式互不干扰；

添加时机

在uni-app中我们需要给每一个组件添加scoped属性吗？
答案是不需要的，因为在vue中在打包时会将所有的样式打包到一个css文件中；而在uni-app中会将每个页面打包到一个单独的wxss文件中，因此这样已经保证了该文件的样式不被其他文件干扰了；

若是我们抽离组件，要是不想当前组件中的样式被影响可以添加scoped属性。