vue父组件样式穿透修改子组件样式
在 Vue 中，使用父组件样式穿透到子组件通常不推荐，因为它破坏了样式的作用域隔离，但如果你确实需要这样做，可以使用深度选择器。Vue 2 使用 ::v-deep，而 Vue 3 使用 /deep/ 或 ::v-deep 都可以。
以下是使用深度选择器来修改子组件中 pre 标签背景颜色的示例：
<!-- ParentComponent.vue -->
<template><child-component />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
};
</script><style>
/* Vue 2 使用 ::v-deep 修改子组件标签pre的背景颜色 */
::v-deep .child-component pre {background-color: black;color: #fff; /* 为了确保可读性，同时设置文字颜色为白色 */
}/* Vue 3 可以使用 /deep/ 或者 ::v-deep */
/* .child-component /deep/pre {background-color: black;color: #fff;
} */
</style>