首页技术文章正文

怎样解决组件之间的样式冲突问题?

更新时间:2021-12-30 来源:黑马程序员 浏览量:

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

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

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

1.自定义属性

为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,示例代码如下:

< template > 
< div class = "container"data - v - 001 > 
< h3 data - v - 001 > 轮播图组件 < /h3> 
< /div> 
< /template>

 < style >
    /*通过中括号“属性选择器”,来防止组件之间的样式冲突问题,
      因为每个组件分配的自定义属性是“唯一的”*/
    .container[data - v - 001] {
        border: 1 px solid red; 
   }
 < /style>

2.style 节点的 scoped 属性

为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题

<template>
<div class="container">
     <h3>轮播图组件</h3>
   </diV>
</template>

<style scoped>
/* style 节点的 scoped属性,用来自动为每个组件分配唯一的“自定义属性”,
    并自动为当前组件的DOM标签和style样式应用这个自定义属性,防止组件的样式冲突问题*/
.container {
   border: 1px solid red;
}
</style>

3./deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器。

<style scoped>
.title {
  color:blue;/*不加/deep/时,生成的选择器格式为|.title[data-v-052242de]*/
}

/deep/ .title {
  color:blue;/*加上/deep/时,生成的选择器格式为[data-v-052242de] .title*/
}
</style>

注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。






猜你喜欢:

vue中注册组件的两种方式

JavaScript数组索引用法和检索方法

ionic如何实现图标类样式?

清除input默认样式【CSS教程】

黑马程序员HTML前端与移动开发培训

分享到:
在线咨询 我要报名