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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
咖啡的种类和口感
2021/03/03 新手入门
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Laravel实现表单提交
2017/05/07 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python实现剪切功能
2019/01/23 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
年级组长自我鉴定
2014/02/22 职场文书
继承公证书
2014/04/09 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书