vue scoped样式穿透父组件

在Vue中，scoped样式是一种给组件的样式添加作用域的方式，让样式在组件内起作用，不会影响到其他组件。然而，有时候我们希望某个组件的样式作用于其子组件或者父组件，这就需要穿透scoped样式。

对于子组件，我们可以通过使用`/deep/`或者`>>>`来穿透scoped样式。例如，在父组件的样式中，可以这样定义：

<style scoped>
    .parent /deep/ .child {
        color: red;
    }
</style>

在上面的例子中，`.parent`是父组件的样式，而`.child`是子组件的样式。使用`/deep/`可以让`.child`样式作用于子组件。

对于父组件，如果想要穿透scoped样式，可以通过将样式定义在全局样式中，或者使用`>>>`。例如，在子组件中，可以这样定义：

<template>
    <div class="parent">
        <div class="child">子组件样式</div>
    </div>
</template>

<style scoped>
    .child {
        color: red;
    }
    .parent >>> .child {
        color: blue;
    }
</style>

在上面的例子中，`.child`是子组件的样式，`.parent`是父组件的样式。使用`>>>`可以让`.child`样式作用于父组件。

需要注意的是，`/deep/`和`>>>`只在一些支持CSS Modules的构建工具中生效，例如vue-loader。如果在其他环境中使用，可能无法生效。

总结：通过使用`/deep/`或者`>>>`，我们可以穿透Vue的scoped样式，让样式作用于子组件或者父组件。但是需要注意，这种方式只在部分构建工具中生效，不同环境可能会有差异。