vue什么时候会用到样式穿透 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue中的样式穿透是指通过一些技术手段来修改组件内部元素的样式，从而实现样式的定制化或覆盖。在某些情况下，我们需要修改组件的样式，但又不能直接修改组件的源代码，这时就可以考虑使用样式穿透。

下面是一些使用Vue中样式穿透的场景和方法：

修改第三方组件的样式：在使用第三方组件库时，我们通常无法直接修改组件的样式，因为组件的样式被封装在组件内部。这时，我们可以通过使用深度选择器或者使用作用域插槽来实现样式穿透。例如，使用/deep/或者>>>选择器可以修改第三方组件内部的样式。
修改子组件的样式：有时候，我们希望在父组件中修改子组件的样式，但是组件之间的样式是隔离的。这时，可以使用ref属性引用子组件，在父组件中通过$refs来修改子组件的样式。
动态修改样式：有时候，我们需要根据组件的状态或者用户的操作来动态修改样式。这时，可以使用计算属性或者监听器来实现样式的动态变化。

总之，样式穿透是在特定情况下使用的一种技术手段，可以帮助我们修改组件的样式，但是需要注意在使用样式穿透时要遵循组件的封装原则，避免破坏组件的隔离性和可复用性。同时，样式穿透也应该谨慎使用，尽量使用组件提供的样式定制化接口来修改样式，避免使用不推荐的样式穿透方法。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，样式穿透是在使用CSS预处理器（如Sass、Less）时经常会遇到的一种情况。样式穿透是指在子组件中修改父组件中定义的样式。

以下是一些在使用Vue时可能需要使用样式穿透的情况：

修改第三方组件的样式：当使用第三方UI组件库时，可能需要对某个特定的组件进行样式修改。由于第三方组件库通常会使用scoped样式，这意味着样式仅在当前组件中生效，无法直接修改。这时，可以使用样式穿透来覆盖第三方组件的样式。
子组件中使用父组件的样式：在Vue中，父组件的样式默认不会被子组件继承。如果需要在子组件中使用父组件的样式，可以使用样式穿透。
修改父组件的样式：有时候，子组件需要修改父组件中定义的样式。由于父组件样式使用了scoped属性，这样样式仅在父组件中生效，子组件无法直接修改。可以通过样式穿透来修改父组件的样式。
复用组件时的样式修改：有时候，需要在同一个组件中同时使用多个类似样式的组件，并对它们进行部分样式的修改。使用样式穿透可以方便地对这些组件的样式进行修改。
使用插件或库修改样式：在使用一些插件或库时，可能需要修改其提供的默认样式。由于插件或库通常会使用scoped样式，这意味着样式仅在其内部生效，无法直接修改。这时，可以使用样式穿透来覆盖插件或库的默认样式。

总结来说，样式穿透在Vue中的使用场景主要包括修改第三方组件的样式、子组件使用父组件的样式、修改父组件的样式、复用组件时的样式修改以及使用插件或库修改样式等情况。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，样式穿透（style piercing）是一种特殊的CSS选择器技术，用于影响子组件的样式，以达到样式继承或覆盖的效果。通常，样式穿透被用在使用第三方UI库或组件中，这些库或组件具有封装的样式，并限制了样式的修改和自定义。

样式穿透的主要使用场景是，当我们需要修改或覆盖子组件的默认样式时。

下面我将详细介绍样式穿透的两种常见方法：深度选择器和插槽。

深度选择器

为了能够使用深度选择器，需要在样式规则前加入/deep/选择器或者::v-deep选择器。它们起到了相同的效果。

示例：

<style scoped>
    .parent /deep/ .child {
        color: red;
    }
    /* 或者 */
    .parent ::v-deep .child {
        color: red;
    }
</style>

在Vue组件中，添加/deep/选择器或者::v-deep选择器之后，可以对子组件中的样式进行修改。

示例：

<template>
    <div class="parent">
        <child></child>
    </div>
</template>

<script>
import Child from './Child.vue';

export default {
    components: {
        Child,
    },
};
</script>

<style scoped>
    .parent /deep/ .child {
        color: red;
    }
    /* 或者 */
    .parent ::v-deep .child {
        color: red;
    }
</style>

上述代码中，我们通过样式穿透方式给子组件的.child元素设置了红色字体颜色。

插槽

样式穿透还可以使用插槽来实现。在父组件中，通过使用<style>标签中的scoped属性，将样式的作用域限制在当前组件。然后，在子组件中，使用<slot>标签，在相同的位置插入了父组件的样式。

示例：

<template>
    <div class="parent">
        <child>
            <template v-slot:default>
                <style scoped>
                    .child {
                        color: red;
                    }
                </style>
            </template>
        </child>
    </div>
</template>

<script>
import Child from './Child.vue';

export default {
    components: {
        Child,
    },
};
</script>

<style scoped>
    .parent {
        font-size: 18px;
    }
</style>

上述代码中，父组件中的样式会通过<slot>标签插入到子组件的相同位置，并生效。

总结：样式穿透是在Vue中影响子组件样式的一种技术，可以通过深度选择器和插槽来实现。它常用于修改或覆盖第三方UI库或组件中的样式。不过，样式穿透在使用时应慎重考虑，应优先考虑使用组件的props和样式覆盖等方式进行样式修改，避免样式穿透带来的复杂性和潜在的问题。

1年前 0条评论