Vue 父组件中修改子组件样式

scoped

style中增加了scoped属性，则样式只会在当前组件中生效。

deep

父组件的style中定义/deep/（Vue3中会报错）或::v-deep。

<style scoped>

/deep/ h3 {
  color: red;
}

::v-deep h3 {
  color: red;
}

</style>

原理

增加了scoped的样式在Chrome中查看可以看到增加了类似[data-v-001]后缀。

h3[data-v-001] {
  color: red;
}

/deep/或::v-deep会转变为：

[data-v-001] h3 {
  color: red;
}

使用场景

使用第三方组件库时，需要修改第三方组件库中的样式，可以用到/deep/或::v-deep。