第七十三篇：解决Vue组件中的样式冲突

好家伙，

1.组件之间的样式冲突

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

举个例子:

我们在Left.vue的组件中添加样式

<template>

<div>

  <h1>我是Right组件</h1>

    <HelloWorld :init="10"/>

    <h5>我是h5</h5>

    </div>

</template>

<script>

export default {

 

}

</script>

<style lang="less" scoped>

  h1{

    color: black;

  }

/*  /deep/ h5 {

    color: pink;

  } */

</style>

随后我们会发现

出现了样式冲突的问题

在Left组件中的定义的样式影响到了Right组件

Right组件中的h1标签同样红了

导致组件之间样式冲突的根本原因是：

①单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的

②每个组件中的样式，都会影响整个index.html页面中的DOM元素

解决方法:

为style标签添加scoped属性

<style scoped>
  h1{
    color: red;
  }
</style>

原理解释:

scoped的原理就是:

给元素添加自定义属性,给css添加对应的属性选择器。

在控制台中可看见组件一中的标签都被加上了 data-v-3c83f0b7的属性.

下面的这这种写法也是可行的(直接的scoped显然更方便)

<template>
  <div>
      <h1 data-v-h1>我是Left组件</h1> //添加自定义属性
    <HelloWorld :init="5"/>

  </div>
</template>

<script>

export default {

}
</script>

<style>
  h1[data-v-h1]{  //添加自定义属性
    color: red;
  }
</style>

2./deep/样式穿透

假设现在给一个h5改成粉色

<style lang="less" scoped>
  h1{
    color: black;
  }
//若不加/deep/
//样式变为h5[data-v-3c83f0b7]

//若加上/deep/
//样式变为[data-v-3c83f0b7]h5

 /deep/ h5 {
    color: pink;
  }
</style>

若我们希望在父组件中直接来改子组件中的样式

那么我们就会用到deep

多用于对第三方组件的样式修改