Sometimes, we want to apply classes to Vue.js functional component from parent component.

In this article, we’ll look at how to apply classes to Vue.js functional component from parent component.

How to apply classes to Vue.js functional component from parent component?

To apply classes to Vue.js functional component from parent component, we can get the reactive property data from data.

For instance, we write

<template functional>
  <div :class="data.staticClass || ''" v-bind="data.attrs">...</div>
</template>

to get the class name from the data.staticClass property.

And then we set that as the value of :class to set that as the class name dynamically.

Conclusion

To apply classes to Vue.js functional component from parent component, we can get the reactive property data from data.