[Vuejs]-Control over inherited attributes by vue component

by

1👍

✅

@Boussadjra Brahim answer is definitely one way to handle it, however this will require you to pass in all of the class attributes you want everytime you define the component.

This question is answered in this SO post already as well.How to style a nested component from its parent component in Vuejs?

If you want a bit more flexibility I would suggested using interpolation and properties as below. This will let you define some default classes and pass in whatever else in addition.

<app-header :headerclass="parent-header-class"> </app-header>

Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:

<template>
    <div :class=`${headerClass} internal-class-example button`> </div>
</template>

Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.

Leave a comment