在使用Vue开发过程中，我们有时会用到一些外部组件，如ElementUI、Vant等。
使用这些外部组件的过程中，你有没有遇到过这种情况：有时候我们需要对该组件的样式做一些调整，但在调用该组件的父页面怎样修改样式，都看不到变化。
这是为什么呢？
一般我们在Vue写style的时候，都会给<style>标签添加scoped属性，让css只作用域当前组件中的元素，避免了污染全局样式。
但是在父组件中添加scoped之后，父组件的样式将不会渗透到子组件中，所以在父组件中写子组件的样式是无效果的。
那么要如何做才能在父组件修改子组件的样式呢？
一、去掉scoped
去掉scoped之后，父组件中可以书写子组件的样式，当然，此时该组件中的样式就是全局样式了。
该方法不是特别推荐，正确的使用全局样式应该是使用一个全局的app.css。
二、混用本地和全局样式
可以在一个组件中同时使用有作用域和无作用域的样式：
<style>/*全局样式*/</style><style scoped>/*当前组件样式*/</style>
将需要修改子组件的样式写正在上面那个全局样式里面。
三、使用深度作用选择器
如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以用 >>> 操作符：文章来源：https://www.toymoban.com/news/detail-445721.html
<style scoped>.parent >>> .child {/* ... */}</style>
有些像SASS之类的预处理器无法正确解析 >>>，这种情况下我们可以用 /deep/ 操作符替换：文章来源地址https://www.toymoban.com/news/detail-445721.html
<style scoped>.parent /deep/ .child {/* ... */}</style>
到了这里，关于Vue里父组件如何修改子组件样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
