默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的。
② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素。
解决组件样式冲突问题,可以参考以下几种方法:
1.分配唯一的自定义属性
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,示例代码如下:
< template > < div class = "container"data - v - 001 > < h3 data-v-001 > 轮播图组件
2. style 节点的 scoped 属性
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题,示例代码如下:
轮播图组件
3./deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器。
注意/deep/是vue2.x中实现样式穿透的方案。在vue3.x中推荐使用:deep()替代/deep/。
Copyright © 2013-2021 河南云和数据信息技术有限公司 豫ICP备14003305号 ISP经营许可证:豫B-20160281