Vue.js v-deep 指令详解：如何修改子组件样式

v-deep 是 Vue.js 中的一个特殊指令，用于在自定义组件中修改子组件的样式。它的作用是将样式规则深度作用于子组件，以解决样式作用域的问题。

在 Vue.js 中，组件的样式默认是作用于组件自身，不会影响到组件内部的子组件。这是因为 Vue.js 在编译组件时会将组件的样式自动添加一个唯一的哈希值，使得样式规则只作用于当前组件。

然而，有时候我们希望能够修改子组件的样式，这时就可以使用 v-deep 指令。v-deep 指令会告诉 Vue.js 将样式规则深度作用于子组件，使得子组件可以继承父组件的样式。

使用 v-deep 指令的示例代码如下：

<template>
  <div class='parent-component'>
    <child-component v-deep></child-component>
  </div>
</template>

<style scoped>
.parent-component >>> .child-component {
  /* 在父组件中使用 v-deep 指令来修改子组件的样式 */
  background-color: red;
}
</style>

在上面的例子中，父组件通过使用 v-deep 指令来修改子组件的背景颜色为红色。这样，子组件就会继承父组件的样式规则，实现了样式的深度作用。

需要注意的是，v-deep 指令只在使用了 scoped 属性的样式中有效。如果在全局样式中使用 v-deep 指令是无效的。