vue组件scoped的作用
vue组件-scoped作用
需求: p标签名选择器, 设置背景色
问题: 发现组件里的p和外面的p都生效了
解决: 给Pannel.vue组件里style标签上加scoped属性即可
<style scoped>
// style 添加 scoped 属性后,可以实现样式独立作用域<style scoped>p{
background-color: pink;}</style>
在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
scoped的使命与作用
答案大家应该都知道,没错!两个页面中的链接文字都变成了红色,当我们点击juejin这个页面的时候,浏览器会自动引入当前页面的样式,再去点击github时浏览器会复用这个样式,所以a链接的颜色都会变红,因为Vue是单页面应用,所以我们打开的每一个页面的样式都会被夹在成全局的样式,解决办法就是加上scoped,这时a标签的颜色就不同了,我们打开页面看下a标签(下图)
这时候的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的副作用,那我们怎么解决它呢?样式穿透
<style scoped>
.my-Txt {
width: 200px;
}
.my-Txt ::v-deep input {
background-color: pink;
}
</style>
我们可以看到这个唯一标识从input后面跑到了my-Txt的后面了,也就是说我们不加入这个::v-deep,Vue永远都会把这个唯一的标识拼接在我们写的样式的最后一段,如果我们想改变这个唯一标识的位置,就需要你用样式穿透来指定,那么上图的意思就是带有这个唯一标识的my-Txt的元素,它的子元素中的input会应用这个样式,而我们写的这个my-Txt也是具备这个唯一标识的,从上面图可以看到。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhjkg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24