Vue 组件间的样式冲突污染


Posted in Javascript onAugust 31, 2017

一、污染是如何产生的?

得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法, <template></template><style></style><script></script> ,在大多数情况下,我们希望组件间定义的样式是相互隔离的,在 Weex 当中的确如此,组件天生隔离,可是在 Vue 当中,运行的载体还是浏览器,所有的样式类还是会通过 style 标签插入头部,影响全局,交叉污染

二、增加 Scoped 标识

依然是 Vue-loader,通过为组件中的 style 标签增加一个 scoped 标识,Vue-loader 在编译的过程中会为组件每一个元素节点增加 scopeId 作为属性,同时为所有的样式类加上属性选择器 scopeId,从而达到隔离的效果,大概是下面的样子:

每个组件有唯一的 scopeId,按理说,这样应该能够做到样式隔离了,实际上, 这种方式其实表现已经足够好了,除了以下这种情况~~

三、ScopeId 的继承

我们把上面的例子再完善下:

// 父组件
<template>
  <div>
    <div class="bg"></div>
    <Sub></Sub>
  </div>
</template>
<script>
  import Sub from './sub';
  export default {
    components: { Sub }
  };
</script>
<style scoped>
.bg {
  background-color: #000;
  width: 100px;
  height: 100px;
}
</style>

// 子组件
<template>
  <div class="bg">
  </div>
</template>
<script>
  export default {
  };
</script>
<style scoped>
.bg {
  width: 300px;
  height: 300px;
  margin-top: 5px;
}
</style>

由于我们使用了 scoped 标识进行样式隔离,子组件的 div 不应该有任何背景颜色,可是现实总在狠狠的打脸~~

Vue 组件间的样式冲突污染

不知道你的媚眼看到问题的所在了没:

子元素的 根元素 会继承父元素的 ScopeId!

子元素的 根元素 会继承父元素的 ScopeId!

子元素的 根元素 会继承父元素的 ScopeId!(说了三遍的话,肯定很重要)

由于子元素的 根元素 除了拥有自己的 ScopeId 属性,还继承了父元素的 ScopeId 属性,所以父元素的样式类 bg 对其依然有效

四、怎么破?

破解的方式也很简单,为每一个组件的根元素提供一个另类一点的样式名(如果有的话),例如就不要每个组件都命名为:wrap,根据业务名为:b1-wrap、b2-wrap 等

组件中的非根元素,类名不管怎么命名,怎么重名,都是不会发生污染的,这个自己领悟~~

五、这应当属于 Vue-loader 的一个 bug

没错,这应该是一个 bug,如果是我应该会怎么解呢,编译的时候不是增加属性,而是直接根据 scopeId 修改类名,嘿嘿~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
js预加载图片方法汇总
Jun 15 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 #Javascript
JavaScript基础之流程控制语句的用法
Aug 31 #Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 #Javascript
浅谈vue的踩坑路
Aug 31 #Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 #Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 #Javascript
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php简单图像创建入门实例
2015/06/10 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
捐助倡议书范文
2014/04/15 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
授权委托书公证
2014/09/14 职场文书
给老婆道歉的话
2015/01/20 职场文书
全陪导游词开场白
2015/05/29 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
python 实现图片特效处理
2022/04/03 Python