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

时间:2019-09-12 14:15:07

标签: javascript css vue.js styles vue-component

我将使用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 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文件内的style标签中对其进行样式设置。反正有解决办法吗?
注意:我知道我可以为每个嵌套的组件分配一个类,然后选择它们以与CSS类选择器一起使用。

1 个答案:

答案 0 :(得分:1)

我将通过在每个子组件(也许是HeaderClassBodyClass等中)创建一个属性来解决这个问题。这样,使用这些子组件的任何组件都可以传递所需的任何类,并相应地设置其样式。

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

在子组件内部,您可以使用这些属性和v-bind HTML内的类,如以下示例所示:

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

注意:这不允许您使用任何带范围的父CSS传递给子。您传递的课程必须是全局的。否则,子组件将不知道它是什么。