style标签上的scoped属性

这篇具有很好参考价值的文章主要介绍了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属性。文章来源地址https://www.toymoban.com/news/detail-837311.html

到了这里,关于style标签上的scoped属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序openBluetoothAdapter:fail api scope is not declared in the privacy agreement

    uniapp微信小程序在查找蓝牙时报openBluetoothAdapter:fail api scope is not declared in the privacy agreement 昨天还可以正常使用,到了今天在测试连接蓝牙时就报这个问题。刚开始以为是自己的代码哪里出现了问题,因为近期一直在调试蓝牙打印的功能。找了N久都还是一头雾水,包括对比上

    2024年02月06日
    浏览(66)
  • 微信小程序:fail api scope is not declared in the privacy agreement(授权点击没反应)

    前言:这两天微信小程序项目出现了各种api不能正常调用,某种功能点击没有反应, 如:本来好好的,但选择图片api无法使用了 如:本来好好的,但点击授权没有反应 如:本来好好的,但点击登录,授权窗口也不弹出来 解决:出现这些问题是因为 隐私政策 需要更新!!!

    2024年02月05日
    浏览(52)
  • 微信小程序用户隐私保护指引fail api scope is not declared in the privacy agreement

    今天突然小程序登录不了,后台报错“The given payload is invalid.”但是小程序这边流程是正确的,绝对没错的,找了半天想起来看看wx.login的报错,结果显示:“fail api scope is not declared in the privacy agreement”,于是就去更新了用户协议,但是更新了还不对,才发现微信 于是就去查

    2024年02月06日
    浏览(190)
  • 微信小程序--几个常用标签

    view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下,宽度100%); text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下,不会独占一行,宽和高由内容撑开,这个时候你设置宽高是没有用的); image 这个标签比较重要,图片组件。src里面可以放网络

    2024年02月08日
    浏览(41)
  • 微信小程序自定义组件标签

    目录 前言 1.创建一个components文件夹,用来放自定义组件标签

    2024年02月10日
    浏览(109)
  • 微信小程序image标签的使用

    在小程序中,我们可以使用 image 标签来添加图片。 image 标签有以下属性: src :图片路径,可以是本地路径或网络路径 mode :图片裁剪、缩放的模式,默认为\\\"scaleToFill\\\"(缩放以填充整个容器) 添加指向本地图片的 src 属性后的显示效果: image 标签默认会根据图片的宽高自适

    2024年02月03日
    浏览(61)
  • 微信小程序中的基础标签

    小程序标签是指微信小程序页面中的不同组件,用于展示和处理数据。 小程序标签由结构标签、样式标签和逻辑标签三部分组成,分别对应页面的结构、样式和逻辑。 小程序标签具有良好的兼容性,可以在不同品牌、不同型号的手机上正常运行。 1.view标签:用于展示文本、

    2024年01月17日
    浏览(52)
  • 微信小程序的标签及常见样式

    view 类似div 块状元素 可设置 宽高! 横向滑动 标签组件: swiper和swiper-item(单个页面) 一般都是照片! 视屏和音频都可不行,上传代码包大小有限制! swiper组件常用属性: 竖向滑动 组件: scroll-view 滚动的视图容器 必须给个固定高度! text标签 类似HTML中span标签 是个行内标签! 该标签只

    2024年02月09日
    浏览(62)
  • 微信小程序的基础标签及使用(入门)

          我们以前在html中使用的很多标签在微信小程序中都无法使用例如div,h1-h6,span等等。  当然在小程序中会出现很多的标签提供开发者使用: view :为块元素相对于以前我们所使用的的div text :可以使当做span使用或者h1-h6          scroll-view: 可滚动视图区域加入属性可

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包