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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
浅谈Python 递归算法指归
2019/08/22 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python实现扫雷游戏
2020/03/03 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
初中化学教学反思
2014/01/23 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
英文感谢信范文
2015/01/21 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
活动新闻稿范文
2015/07/17 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python