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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
js实现密码强度检验
Jan 15 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
Node.js模块加载详解
2014/08/16 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
这段代码难道不该打印出56吗
2013/02/27 面试题
法学个人求职信范文
2014/01/27 职场文书
大学专科求职信
2014/07/02 职场文书
学生吸烟检讨书
2014/09/14 职场文书
优秀党员个人总结
2015/02/14 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年质检工作总结
2015/05/04 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
黑白记忆观后感
2015/06/18 职场文书