文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

样式穿透vue中的scoped有什么作用

2023-07-02 18:47

关注

这篇文章主要介绍了样式穿透vue中的scoped有什么作用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇样式穿透vue中的scoped有什么作用文章都会有所收获,下面我们一起来看看吧。

scoped的使命与作用

这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下scoped的作用,给其中一个页面的a标签加上红色,另外一个没有加任何样式,并且没有在style中使用scoped,如下图

样式穿透vue中的scoped有什么作用

答案大家应该都知道,没错!两个页面中的链接文字都变成了红色,当我们点击juejin这个页面的时候,浏览器会自动引入当前页面的样式,再去点击github时浏览器会复用这个样式,所以a链接的颜色都会变红,因为Vue是单页面应用,所以我们打开的每一个页面的样式都会被夹在成全局的样式,解决办法就是加上scoped,这时a标签的颜色就不同了,我们打开页面看下a标签(下图)

样式穿透vue中的scoped有什么作用

这时候的a标签多了一个data-v-xxxxxxx这个东西,这个就是Vue替我们加上的, Vue在构建构建这个项目的时候会提我们以组件单位,不同的组件下所有的元素都会加上同一个类似组件ID的东西,同时会在我们写的样式上以属性选择器的方式拼接上这个唯一标识,我们来验证一下,(下图)

样式穿透vue中的scoped有什么作用

对的,我们加上scoped之后Vue会在这段样式的最后一段加上这个属性,然后通过属性选择器选中这个元素,从而实现元素样式的隔离,接下来我们一起看下scoped的副作用

scoped的副作用

这时我们引入element-ui验证一下scoped的副作用,这里写了一个demo(下图),这里也使用了scoped

样式穿透vue中的scoped有什么作用

我们检查一下元素(下图)

样式穿透vue中的scoped有什么作用

注意这里的input元素是没有例如data-v-xxxxxx的唯一标识的但是我们自己写的样式(my-Txt input)在被构建之后是什么样子的呢?(下图)

样式穿透vue中的scoped有什么作用

如上图所示,我们自己写的样式却被拼接了这个唯一的标识,所以我们再怎么操作也是没法命中这个元素的,也就是说Vue并没有给这个input加上这个标识,但是却在我们的样式中加上了这个标识,但是我们如果把scoped去掉,那么就能命中目标,但是这样我们是不推荐的,样式会被打包到统一的样式中,这就是scoped的副作用,那我们怎么解决它呢?样式穿透

样式穿透(::v-deep)

我们现在就加上样式穿透就可以命中目标

<style scoped>.my-Txt {  width: 200px;}.my-Txt ::v-deep input {  background-color: pink;}</style>

这时候我们看下构建后的样式Vue会怎么处理(下图)

样式穿透vue中的scoped有什么作用

我们可以看到这个唯一标识从input后面跑到了my-Txt的后面了,也就是说我们不加入这个::v-deep,Vue永远都会把这个唯一的标识拼接在我们写的样式的最后一段,如果我们想改变这个唯一标识的位置,就需要你用样式穿透来指定,那么上图的意思就是带有这个唯一标识的my-Txt的元素,它的子元素中的input会应用这个样式,而我们写的这个my-Txt也是具备这个唯一标识的,从上面图可以看到

关于“样式穿透vue中的scoped有什么作用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“样式穿透vue中的scoped有什么作用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯