vue中在父组件需要修改子组件样式

不知道大家在学习过程中有没有遇到过无法在<style scoped>中直接修改子组件的样式。

为什么无法修改？

原因：

首先要理解为什么要添加scoped？

因为要避免污染其他组件同类名的样式。

比如在工作中，一般由项目组长分配任务给你们，但是呢，有时候就是太巧了，你和别人的类名是一样的，这就会导致污染。有可能你的样式覆盖了他的样式，或者他的样式覆盖了你的样式。

我们加上scoped后，我们打开网页按下F12，可以在elements视图中查找到该页面的DOM元素，但是你仔细的看就会发现元素中会多了一个 `data-v-456ad4504（后面的值不一样）`这就确保了每个DOM的唯性。

所以直接修改是识别不到子组件中的类名的

那么怎么解决这个问题？

有两种方法：

第一种简单的方法：

一个vue文件可以同时存在几个style

在style scoped后面加多一个style，这个style不加scoped。类似下面这样：

<style scoped>
<style/>
<style>
<style/>

但是需要知道的是这种的弊端：会修改所有子组件的样式，其他页面引用了该子组件，样式也会跟着变

第二种方法就是用深度选择器 /deep/ 或 >>>

使用方法：

.[子组件名] >>> .[子组件里面的类名]
.[子组件名] /deep/ .[子组件里面的类名]

我有一个子组件名字为myComponent ，子组件中有一个类名为 myClass

则：

.myComponent /deep/ .myClass
.myComponent >>> .myClass

有错误的地方请纠正哈，一起共同进步！！噶油