Vue中的scoped实现原理及穿透方法


Posted in Javascript onMay 15, 2018

何为scoped?

在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <div class="example">hi</div>
</template>

转译后:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>

即:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。

为什么需要穿透scoped?

scoped看起来很美,但是,在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值。

曲线救国的方法

其实,还拥有一种曲线救国的方法,即在定义一个含有scoped属性的style标签之外,再定义一个不含有scoped属性的style标签,即在一个vue组件中定义一个全局的style标签,一个含有作用域的style标签:

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

此时,你只需要将修改第三方样式的css写在第一个style中即可。

个人推荐的方法

以上两种方法,穿透方法实际上违反了scoped属性的意义,曲线救国的方法又使得代码太过于难看。

个人推荐第三种方法,即:由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适。

总结

以上所述是小编给大家介绍的Vue中的scoped实现原理及穿透方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue双向绑定简要分析
Mar 23 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
小程序实现筛子抽奖
May 26 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
vue-cli项目中使用Mockjs详解
May 14 #Javascript
vue使用自定义icon图标的方法
May 14 #Javascript
基于Vue2x的图片预览插件的示例代码
May 14 #Javascript
vue组件中的数据传递方法
May 14 #Javascript
vue如何在自定义组件中使用v-model
May 14 #Javascript
JavaScript常用数学函数用法示例
May 14 #Javascript
JavaScript中常见内置函数用法示例
May 14 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP 字符串操作入门教程
2006/12/06 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python输出指定月份日历的方法
2015/04/23 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
设计师大码女装:11 Honoré
2020/05/03 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
2014年元旦感言
2014/03/06 职场文书
2014年安全生产责任书
2014/07/22 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
检讨书范文300字
2015/01/28 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers