如何在 Vuejs 中从其父组件设置嵌套组件的样式?

Question

我将使用 Vuejs 的 flexbox 创建一个布局，例如"标题侧边栏主内容侧边栏页脚"。 我为布局的每个部分创建了单独的 .vue 文件，我的意思是像侧边栏.vue 和 header.vue 之类的东西......
我将在 App.vue 文件中使用它们，例如：

<template>
<div id="app">
<app-header ></app-header>
<app-sidebar></app-sidebar>
<app-content></app-content>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
</div>
</template>
<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";
export default {
components: {
"app-header": header,
"app-sidebar": sidebar,
"app-content": content,
"app-footer": footer
}
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}

#app {
border: 3px solid red;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
> * {
border: 1px solid black;
}
}

主要问题是我无法从 App.vue 文件中选择这些自定义嵌套组件来设置它们的样式。 例如，我不能像 HTML 和 CSS 中的其他普通标签那样使用 app-header{} 来选择它并在 App.vue 文件内的样式标签中设置它。 有没有办法解决它？
注意：我知道我可以为每个嵌套组件分配一个类，然后选择它们以与css类选择器一起使用。

Answer 1

我会通过在每个子组件中创建一个属性来处理这个问题(可能是HeaderClass、BodyClass等(。这样，使用这些子组件的任何组件都可以传递它们所需的任何类并相应地设置它们的样式。

<app-header :headerclass="parent-header-class"> </app-header>

在子组件内部，可以使用这些属性并在 HTML 中v-bind类，如下例所示：

<template>
<div :class=`${headerClass} internal-class-example button`> </div>
</template>

注意：这不允许您使用任何作用域内的父 CSS 传递给子级。您传递的类必须是全局的。否则，子组件将不知道它是什么。