Question

我有App.vue：

<template>
    <div>
        <p class="text">Hello World</p>
    </div>
</template>

<script>
import ParentComponent from '../components/ParentComponent'

export default {
    components: {
        ParentComponent
    }
}
</script>

然后我有ParentComponent：


<template>
    <div>
        <p class="text">Hello World</p>
        <ChildComponent />
    </div>
</template>

<script>
import ChildComponent from '../ChildComponent'

export default {
    components: {
        ChildComponent
    }
}
</script>

<style>
    .text {
        font-size: 30px
    }
</style>

ChildComponent：

<template>
    <p class="text">Hello World</p>
</template>

<script>
export default {

}
</script>

<style>

</style>

现在，无论我在ParentComponent中使用哪种样式，我都希望子组件也具有该样式。

但是，我不希望App.vue具有这种风格。同样，如果ChildComponent具有任何其他组件，则它们也应该继承ParentComponent的样式。像ParentComponent这样的样式提供者。

我真的没有任何代码可显示。我只想知道这是否可行以及如何实现？

Answer 1

您可以简单地在父组件中使用您希望孩子使用的样式创建一个css类。然后，您只需在孩子中使用该类即可。

只要子组件确实作为子组件嵌套在父组件中，您所拥有的示例实际上就可以按照您希望的方式工作。

我们在公司所做的工作是，我们始终使用与组件名称相同的类来包装组件。如果您要进行一些奇怪的父类型样式设置，那么这将使您显而易见的样式设置。

ParentComponent：

<template>
    <div>
        <p class="text">Hello World</p>
        <ChildComponent />
    </div>
</template>

<script>
import ChildComponent from '../ChildComponent'

export default {
    components: {
        ChildComponent
    }
}
</script>

<style>
    .some-class-name {
     /*...*/
    }
    .text {
        font-size: 30px
    }
</style>

ChildComponent：

<template>
    <div class="some-class-name">
        <p class="text">Hello World</p>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

有没有办法将父CSS泄漏到Vue中的子组件？

1 个答案: