踩坑：1.样式污染 2.父子组件样式互相影响

一、造成样式污染的可能：

1.单组件：未使用scoped关键字导致样式泄露，污染全局

应采用：

<style scoped>
</style>

2.多组件：公共css文件，多组件引用

原因：<style scoped> @import "assets/css/common.css"; </style>

虽然加了scoped，最后无效的原因是“@import”，原因如下：
@import并不是直接引入css代码到页面，而是发起新的不带scoped的请求获得样式资源；因此，这种引用方式是全局的，从而引起全局污染。

应采用：src引入方式

<style lang="scss" scoped src="@/styles/common.scss">
</style>

二、父子组件样式互相影响

参考链接：vue 父组件样式影响子组件_vue父组件样式影响子组件-优快云博客

1.目的：避免父子组件样式互相影响

问题：父子两个组件的style标签都使用了scoped属性，但是子组件的根组件样式受到父组件的样式影响。

原因：vue的单文件组件是通过vue-loader加载的

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

解决方法：待补充

2.目的：父组件样式影响多个子组件，实现代码复用，但是不泄露污染到别的组件

解决方法：待补充