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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
小程序实现录音上传功能
Nov 22 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中的事务使用实例
2015/05/26 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python中为什么要用self探讨
2015/04/14 Python
详解Python文本操作相关模块
2017/06/22 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python执行时间的几种计算方法
2020/07/31 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
上课玩手机检讨书
2014/02/08 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
PL350与SW11的比较
2021/04/22 无线电
opencv检测动态物体的实现
2021/07/21 Python