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函数
Dec 22 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
js中常用的Math方法总结
Jan 12 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
js实现图片实时时钟
Jan 15 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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 var_export与var_dump 输出的不同
2013/08/09 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js 函数调用模式小结
2011/12/26 Javascript
iframe实用操作锦集
2014/04/22 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python字符串格式化
2015/06/15 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
简单了解python协程的相关知识
2019/08/31 Python
python实现智能语音天气预报
2019/12/02 Python
python cookie反爬处理的实现
2020/11/01 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
品德评语大全
2014/05/05 职场文书
群众路线剖析材料
2014/09/30 职场文书
委托培训协议书
2014/11/17 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
60句有关成长的名言
2019/09/04 职场文书
PL350与SW11的比较
2021/04/22 无线电