vue 中css样式穿透

问题由来

当在两个子组件中引入时，header 中并未编辑样式，footer写了自己的样式，因为同有一个main的class,所以，在渲染时生成的全局的样式，header组件也捡了footer的便宜，但是，项目中我们不希望看到这样的效果，我们想要的是组件作用域内的样式。

代码截图

效果

解决办法

在 style 添加一属性 scoped， 生成组件作用域内的 CSS

如此，这样就各个组件就可以写各自的样式而不互相污染了，

引入其他插件时的样式穿透

具体写法

 /* 父元素  /deep/  插件元素*/
 .parent /deep/ .swiper-silder{
    width: 30px;
}