Question

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

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

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

我可以使用道具传递样式以在v-bind：style命令中使用，而道具无法找到传递（或提供）与v-bind：class一起使用的方法。

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

在一个示例中，子组件是一个通用表，它需要诸如列宽，单元格颜色等内容。

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

Answer 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对其进行样式设置时，可以为父组件指定一个 specific 类名。例如，如果您的父组件是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的用法。