摘要:我需要样式化一个子组件中的<slot>
内容。我正在使用作用域 CSS,但样式不被应用:
我有以下两个组件:
<!-- Parent.vue -->
<template>
<h1>{{ msg }} from Parent</h1>
<Child>
<h1>{{ msg }} from Child</h1>
</Child>
</template>
...
<style scoped>
h1 {
color: green;
}
</style>
<!-- Child.vue -->
<template>
<slot></slot>
</template>
...
<style scoped>
h1 {
color: red;
}
</style>
我想让第二个<h1>
变成红色,但它是绿色的,因为该组件被呈现为类似于:
<h1 data-v-452d6c4c data-v-2dcc19c8-s>Hello from Child</h1>
<style>
h1[data-v-452d6c4c] {
color: green;
}
h1[data-v-2dcc19c8] {
color: red;
}
</style>
data-v-452d6c4c
来自父组件,data-v-2dcc19c8-s
来自子组件。
如果在<h1>
标签的第二个属性只是data-v-2dcc19c8
,那么我想要的样式就会应用,但由于它带有-s
后缀(插槽?),所以不会应用。
我可能可以找到其他的解决方案,比如使用类之类的东西,但我很少使用<slot>
,我想了解其中的内部工作原理。那个-s
告诉我,我尝试做的事情可以通过框架的帮助来处理,我错过了什么吗?
一个可工作的示例:
v-slotted
没有显示任何结果。 - Mike Harrison