修改Vue 2中父组件中子组件的html样式

Question

我正在做一个npm时间轴Vue组件。但我正面临着问题。

父组件A:

<script>
export default Vue.extend({
name: "aComponent",
})
</script>
<template>
<div class="events-content">
<ol>
<slot name="eventsContent"></slot>
</ol>
</div>
</template>

子组件B:

<aComponent>
<template v-slot:eventsContent>
<li class="selected" ref="event-1">
<p>
orem ipsum dolor sit amet, consectetur adipisicing elit. Illum
praesentium officia, fugit recusandae ipsa, quia velit nulla
adipisci? Con
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum
praesentium officia, fugit recusandae ipsa, quia velit nulla
adipisci? Con
</p>
</li>
</template>
</aComponent>

现在我想在父组件A的方法中修改子组件B的li的样式，这就是为什么我试图在父组件A中使用ref="event-1">来访问，但它不起作用。我不想在子组件B中添加太多代码，因为它将是npm包。那么我如何修改父组件A中的子组件B的每个li样式

Answer 1

父组件可以用自己的<style>块样式化插口子组件:

<!-- ParentComponent.vue -->
<template>
<aComponent>
<template v-slot:eventsContent>
<li class="selected">
⋮
</li>
<li>
⋮
</li>
</template>
</aComponent>
</template>
<style>
li {
color: #444;
}
.selected {
font-weight: bold;
color: blue;
}
</style>

演示