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

Question

我将使用 Vuejs 的 flexbox 创建一个布局，如“header sidebar main-content sidebar footer”。我为布局的每个部分创建了单独的 .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>

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>在子组件内部，您可以v-bind在 HTML 中使用这些属性和类，如下例所示：<template>&nbsp; &nbsp; <div :class=`${headerClass} internal-class-example button`> </div></template>注意：这不允许您使用任何作用域父级 CSS 传递给子级。你传下来的类必须是全局的。否则，子组件将不知道它是什么。