摘要:我需要<slot>
从子组件中对 a 的内容进行样式设置。我正在使用作用域 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
告诉我,我正在尝试做的事情可以在框架的帮助下处理,我错过了什么?
工作样本: