如何在父组件中定义样式，然后将其传递给子组件，例如？
<style>
.teststyle {
background-color: red;
width: 100px;
}
</style>
我以为如果我不使用作用域，.teststyle 将可供孩子使用，但它对我不起作用。
我可以传递样式以使用 props 在 v-bind：style 命令中使用的样式，找不到传递(或提供(与 v-bind：class 一起使用的方法。
子组件供许多父组件重用，每个父组件具有不同的样式/类属性，每个属性都具有不同的属性。
在一个示例中，子组件是一个通用表，它需要列宽、单元格颜色等内容。
在另一个实例中，子组件是网格 css 布局，它不需要 no、列、列布局等。
我通常做的是尝试尽可能简单和干净地设计组件：
- 为根元素提供一个合理的类名(例如
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 */
}
我正在使用这样的选择器，以便它们更具体，并将覆盖在子组件本身上定义的任何样式。无论 CSS 最终的顺序如何，它都可以工作(Webpack 可能无法保证顺序(。
请注意，这使得父组件和子组件在子组件模板的结构和使用的类名方面紧密耦合。如果更改子组件的模板和/或类名，则需要更改声明覆盖该组件样式的所有其他组件中的相应 CSS。
如果您使用的是作用域 CSS，请注意子组件的样式。