CODEWITHSUNDEEP
vue.jsvuejs2
Elias
Elias

Reputation: 199

Modifying the html style of children component in parent component in Vue 2

I am doing an npm timeline Vue component. But I am facing problems.

parent component A:

<script>
export default Vue.extend({
 name: "aComponent",
})
</script>

<template>
   <div class="events-content">
     <ol>
       <slot name="eventsContent"></slot>
     </ol>
   </div>
</template>

children component 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>

Now I want to modify the style of li of Children component B in the method of parent component A. That is why I tried to use ref="event-1" to access in parent component A, but it doesn't work. I don't want to add too much code in children component B, because it is going to be npm package. So how can I modify each li style from children component B in parent component A

Upvotes: 0

Views: 152

Answers (1)

tony19
tony19

Reputation: 138656

The parent component can style the slotted children with its own <style> block:

<!-- 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>

demo

Upvotes: 1

Related Questions