CODEWITHSUNDEEP
vue.jsparent-child
slowFooMovement
slowFooMovement

Reputation: 568

Vuejs How to pass parent classes to child component in template

I'm trying to remember how to pass a parent's :class bindings to a specific child component within a template. For instance:

// parent-component.vue
<template>
  <child-component :class="['foo', bar, 'baz']">
</template>

// child-component.vue
<template>
  <div class="dont-want-classes-here">
    <h1 class="not-here-either">Someting v Important</h1>
    <sub-component :class="['want-parent-classes in-here', ...$parent.classes]">
  </div>
</template>

Do I need to create a new prop just for that purpose? is there a specific part of the Vue instance I can access from within the component?

Thanks

Upvotes: 3

Views: 2151

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

Do I need to create a new prop just for that purpose?

Yes. Vue does not provide a way to customize how the class and style props are applied to the template. It will always apply them to the root element and you cannot change this.

However if it were a functional component, then you can do this. But that doesn't apply here.

Is there a specific part of the Vue instance I can access from within the component?

You can access the class directly from the vnode:

this.$vnode.data.staticClass  // for class="static"
this.$vnode.data.class        // for :class="dynamic"

Upvotes: 4

Related Questions