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

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。LikeParentComponent是样式提供者。

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

标签： javascriptcssvue.js

Answer 1

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

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

我们公司所做的是，我们总是用一个与组件名称相同的类来包装组件。如果您正在做一些奇怪的父类型样式，这使得您的样式非常明显。

父组件：

<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>

子组件：

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

<script>
export default {

}
</script>

<style>

</style>