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

Posted 2023-02-22

【中文标题】如何在 Vuejs 中从其父组件设置嵌套组件的样式？

【英文标题】：How to style a nested component from its parent component in Vuejs?

【发布时间】：2020-01-14 10:45:27

【问题描述】：

我将使用 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 文件内的样式标签中设置它的样式。有没有办法解决它？ 注意：我知道我可以为这些嵌套组件中的每一个分配一个类，然后选择它们以与 css 类选择器一起使用。

【参考方案1】：

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

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

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

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

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

【讨论】：

The classes you pass down must be global，或者（更好）：使用deep selector。