第七十三篇:解决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
多用于对第三方组件的样式修改