Vue 组件间的样式冲突污染

 更新时间:2017年08月31日 09:25:49   作者:小虫巨蟹   我要评论
本篇文章主要介绍了Vue 组件间的样式冲突污染,当多个样式出现时,就会导致样式冲突,本文介绍了具体解决方法

一、污染是如何产生的?

得益于 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 不应该有任何背景颜色,可是现实总在狠狠的打脸~~

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

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

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

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

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

四、怎么破?

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • vue.js中$set与数组更新方法

    vue.js中$set与数组更新方法

    下面小编就为大家分享一篇vue.js中$set与数组更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    这篇文章主要介绍了vue项目打包部署到服务器的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue2.5通过json文件读取数据的方法

    Vue2.5通过json文件读取数据的方法

    本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-02-02
  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    这篇文章主要介绍了Vue 使用计时器实现跑马灯效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • 基于vue写一个全局Message组件的实现

    基于vue写一个全局Message组件的实现

    这篇文章主要介绍了基于vue写一个全局Message组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • webpack+vue.js快速入门教程

    webpack+vue.js快速入门教程

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程,有需要的可以参考借鉴。
    2016-10-10
  • 详解Vue 事件修饰符capture 的使用

    详解Vue 事件修饰符capture 的使用

    capture事件修饰符的作用是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。这篇文章给大家介绍了Vue 事件修饰符capture 的使用,需要的朋友参考下吧
    2017-12-12
  • vue 实现滚动到底部翻页效果(pc端)

    vue 实现滚动到底部翻页效果(pc端)

    这篇文章主要介绍了pc端vue 滚动到底部翻页效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • vue2中引用及使用 better-scroll的方法详解

    vue2中引用及使用 better-scroll的方法详解

    这篇文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法,使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下
    2018-11-11
  • vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论