将样式描述传递给子组件答案

【问题标题】：Pass style description to child component将样式描述传递给子组件
【发布时间】：2019-01-24 10:46:16
【问题描述】：

如何在父组件中定义样式，然后将其传递给子组件，例如？

<style>
  .teststyle {
     background-color: red;
     width: 100px;
  }
</style>

我想如果我不使用作用域，孩子可以使用 .teststyle，但它对我不起作用。

我可以传递样式以在 v-bind:style 命令中使用 props 找不到传递（或使其可用）用于 v-bind:class 的方法。

子组件供许多父组件重用，每个父组件具有不同的样式/类属性，每个父组件具有不同的属性。

在一个示例中，子组件是一个通用表格，它需要列宽、单元格颜色等信息。

在另一种情况下，子组件是网格 css 布局，不需要列、列布局等。

【问题讨论】：

【解决方案1】：

我通常做的是尽可能简单、干净地设计组件：

给根元素一个合理的类名（例如flyout）。
为使用根元素的类名作为前缀的子元素类名（例如flyout-title、flyout-content 等）。有时我会缩写根元素的类名，如果它很长（如fly- 或其他）。

<div class="flyout">
  <div class="flyout-title">{{ title }}</div>
  <div class="flyout-content"><slot/></div>
</div>

这只是我自己的类命名约定，但您可以使用任何名称，只要它是一致的并且不太可能与应用范围内的其他类名称冲突。

现在，当您使用 <flyout> 作为子组件并希望使用 CSS 对其进行样式设置时，您可以为父组件指定一个类名特定。例如，如果您的父组件是 app-menu，则为弹出窗口指定类名称 app-menu-flyout。请注意，此约定与上述约定相同；始终保持一致。

<flyout class="app-menu-flyout"/>

在父组件的<style> 部分，您可以为子组件声明样式，如下所示：

.flyout.app-menu-flyout {
  /* Root element */
}

.flyout.app-menu-flyout .flyout-content {
  /* Child element */
}

我正在使用这样的选择器，以便它们更像specific，并将覆盖在子组件本身上定义的任何样式。无论 CSS 最终的顺序如何，它都可以工作（Webpack 可能无法保证顺序）。

请注意，这使得父组件和子组件在子组件模板的结构和使用的类名方面紧密耦合。如果您更改子组件的模板和/或类名，则需要更改每个其他组件中为该组件声明覆盖样式的相应 CSS。

如果您使用的是作用域 CSS，请注意 child components should be styled 的使用方式。

【讨论】：