Vuejs How to pass parent classes to child component in template

user_3005869 0
Viewed 1355

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

vue.js parent-child
1 Answers

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"
user_7340400
Related