VUE 组件之间的样式冲突问题

1.组件之间的样式冲突问题

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

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

1. 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
2. 每个组件中的样式，都会影响整个index.html页面中的DOM元素

1.1 思考：如何解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，

1.2 style节点的scoped属性

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

1.3 /deep/样式穿透

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

Vant 轻量、可靠的移动端 Vue 组件库链接