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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
文章推荐系统(三)
2006/10/09 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python日期相关操作实例小结
2019/06/24 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Python类class参数self原理解析
2020/11/19 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
文明美德伴我成长演讲稿
2014/05/12 职场文书
委托书怎么写
2014/07/31 职场文书
2014年学生会工作总结
2014/11/07 职场文书
家长学校教学计划
2015/01/19 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript