Vue在父组件中改变子组件内的某个样式

背景

在应用vue开发前端项目时，有时候我们需要在父组件中改变子组件的默认样式，比如你的项目中引用了第三方UI库，但是你觉得某个组件的样式你并不喜欢，那么你想改变它的默认样式，那么我们该怎么办呢？

代码演示

直接上代码，先来看父组件Home.vue的代码：

// 父组件Home.vue

再来看子组件HelloWorld.vue的代码：

// 子组件HelloWorld.vue

那么，我们先来看一下页面的效果：

那么，接下来，我们如果想要在Home.vue中写样式想要改变其子组件HelloWorld.vue中"This is HelloWorld!"这句话的某个样式，比如说字体颜色，那么，我们该怎么办呢？

如果，我们直接在Home.vue的style 标签中直接这样写可以吗？如下：

// Home.vue组建

直接在Home.vue中想要控制子组件的样式，直接这样写，明显是不会生效的！

那么，我们该怎么办呢？此时，我们可以使用深度作用选择器，如果你希望组件scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

比如就上述例子而言，你可以Home.vue中scoped的样式改为下面这样：

如此，将会达到我们想要的效果拉了！看下页面效果：

可以看到，子组件的字体颜色已经改变了！

如果是有些像Sass、less之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。如下：

小提示

上述方法只针对于子组件内部的样式，在父组件中子组件的 width、height等属性不属于子组件的内部的样式哦，直接用常规方法修改即可。

---

原文地址 http://www.manongjc.com/article/37906.html