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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
原生js实现3D轮播图
Mar 21 Javascript
Javascript实现简易天数计算器
May 18 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语法(2)
2006/10/09 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python time模块用法实例详解
2014/09/11 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
10款最好的Python开发编辑器
2019/07/03 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python绘制趋势图的示例
2020/09/17 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
商务邀请函范文
2014/01/14 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
刘胡兰观后感
2015/06/16 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang