我之前尝试过Angular,后来转向Vue,发现他们组件中的
在
示例:
使用Scoped
父组件:
子元素应用的CSS:
:host
选择器非常方便。简单来说,它将:host
的样式应用于组件本身。在
<style scoped></style>
部分,是否有与此相当的功能?示例:
使用Scoped
父组件:
<template>
<div class="host">
<layout-header :open-nav="openNav" @toggle-open="toggleOpen"></layout-header>
<layout-sidebar :open-nav="openNav"></layout-sidebar>
<layout-content></layout-content>
<layout-footer></layout-footer>
</div>
</template>
<style scoped>
.host {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
</style>
内容:
(<layout-content>
)
<div class="host">
stuff
</div>
<style scoped>
.host{
flex: 1;
}
</style>
输出:
(为简化起见,移除了头部、页脚和侧边栏。)
结果是如果它们有一个 .host
类,则标题、侧边栏、内容和页脚会继承父元素的 CSS。
HTML:
<div data-v-238e7577="" class="host">
<div data-v-7412829c="" data-v-238e7577="" class="host">stuff</div>
</div>
子元素应用的CSS:
<div>
)。给它一个ID并对其应用规则。 - ceejayoz.host
或其他什么 - 该类名不会在主应用程序级别的 CSS 文件中使用,并将你的样式代码块作用域限定。这样做可以防止任何冲突。 - ceejayoz:host
。 - tony19.host
,则子组件将具有应用于其上的父级.host
的样式...这似乎有点不对,考虑到文档的编写方式? - Douglas Gaskell