Javascript 如何从Vuejs中的父组件设置嵌套组件的样式？

我将使用Vuejs的flexbox创建一个类似“页眉侧边栏主内容侧边栏页脚”的布局。 我为布局的每个部分创建了单独的.vue文件，我指的是像sidebar.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;
  }
}

从“/components/header”导入标题；
从“/components/sidebar”导入侧栏；
从“/components/content”导入内容；
从“/components/footer”导入页脚；
导出默认值{
组成部分：{
“应用程序标题”：标题，
“应用程序侧栏”：侧栏，
“应用程序内容”：内容，
“应用程序页脚”：页脚
}
};
身体{
保证金：0；
填充：0；
}
#应用程序{
边框：3倍纯红；
最小高度：100vh；
显示器：flex；
柔性包装：包装；
> * {
边框：1px纯黑；
}
}

主要问题是我无法从App.vue文件中选择这些自定义嵌套组件来设置它们的样式。例如，我不能像html和css中的其他普通标记一样使用app header{}来选择它并在app.vue文件中的样式标记中设置它的样式。有没有办法解决这个问题？

---

注意：我知道我可以为每个嵌套组件分配一个类，然后选择它们与css类选择器一起使用。

我会通过在每个子组件中创建一个属性来处理这个问题（可能是

HeaderClass

，

BodyClass

，等等）。这样，任何使用这些子组件的组件都可以传递它们想要的任何类，并相应地设置它们的样式

在子组件内部，您可以使用这些属性和HTML中的类

v-bind

，如下例所示：

---

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

传递的类必须是全局类，或者（更好）：使用。