简单分析vue组件scoped的作用

WBOY

发布时间：2022-08-10 11:16:59

2230人浏览过

来源于CSDN

转载

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于scoped属性的相关问题，在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性，下面一起来看一下，希望对大家有帮助。

简单分析vue组件scoped的作用

【相关推荐：javascript视频教程、vue.js教程】

vue组件-scoped作用

目的: 解决多个组件样式名相同, 冲突问题

需求: p标签名选择器, 设置背景色

问题: 发现组件里的p和外面的p都生效了

立即学习“前端免费学习笔记（深入）”；

解决: 给Pannel.vue组件里style标签上加scoped属性即可

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性

而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

在这里插入图片描述

总结: style上加scoped, 组件内的样式只在当前vue组件生效

scoped的使命与作用

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

在这里插入图片描述

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

乐彼多用户商城系统LBMall(.net)

乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒店铺管理1

下载

在这里插入图片描述

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

在这里插入图片描述

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

scoped的副作用

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

在这里插入图片描述
注意这里的input元素是没有例如data-v-xxxxxx的唯一标识的

但是我们自己写的样式（my-Txt input）在被构建之后是什么样子的呢？(下图)

在这里插入图片描述

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

在这里插入图片描述

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

【相关推荐：javascript视频教程、vue.js教程】

学习Vue.js的优质在线课程推荐

Vue的v-slot指令在具名插槽中如何使用？

Vue.js实现音乐播放器的代码示例

Vue的v-bind和v-on的语法糖分别是什么？

学习Vue.js的最佳实践博客有哪些

相关标签:

vue

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：详解Vue-router子路由（嵌套路由）如何创建下一篇：详解v-bind怎么动态绑定style属性

作者最新文章

玩转夸克浏览器的AI搜索模式_夸克AI搜索新手入门操作指南