How to apply classes to Vue.js Functional Component from parent component?

Question

Suppose I have a functional component:

<template functional>
    <div>Some functional component</div>
</template>

Now I render this component in some parent with classes:

<parent>
    <some-child class="new-class"></some-child>
</parent>

Resultant DOM doesn't have new-class applied to the Functional child component. Now as I understand, Vue-loader compiles Functional component against render function context as explained here. That means classes won't be directly applied and merge intelligently.

Question is - how can I make Functional component play nicely with the externally applied class when using a template?

Note: I know it is easily possible to do so via render function:

Vue.component("functional-comp", {
    functional: true,
    render(h, context) {
        return h("div", context.data, "Some functional component");
    }
});

Daniel · Accepted Answer · 2020-02-19 15:59:50Z

42

TL;DR;

Use data.staticClass to get the class, and bind the other attributes using data.attrs

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

Explanation:

v-bind binds all the other stuff, and you may not need it, but it will bind attributes like id or style. The problem is that you can't use it for class because that's a reserved js object so vue uses staticClass, so binding has to be done manually using :class="data.staticClass".

This will fail if the staticClass property is not defined, by the parent, so you should use :class="data.staticClass || ''"

Example:

I can't show this as a fiddle, since only "Functional components defined as a Single-File Component in a *.vue file also receives proper template compilation"

I've got a working codesandbox though: https://codesandbox.io/s/z64lm33vol

edited Feb 19, 2020 at 15:59

answered Jun 6, 2018 at 20:11

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chad von Nau Over a year ago

To apply both static and dynamic classes from a parent, e.g. <some-child class="a" :class="{b: true}"/> use :class="[data.staticClass, data.class]" in the child.

Eagle_ Over a year ago

How to bind all regular static attributes on childComponent: (1) use :class="data.staticClass" for classes (2) use :style="data.staticStyle" for styles (3) use v-bind="data.attrs" for id etc.

Alexander Kim · Accepted Answer · 2020-06-22 09:03:25Z

1

Render function inside a functional component example, to supplement @Daniel's answer:

render(createElement, { data } {
  return createElement(
    'div',
    {
      class: {
        ...(data.staticClass && {
          [data.staticClass]: true,
        })
      },
      attrs: {
        ...data.attrs,
      }
    }
  )
}

We can use ES6 computed property name in order to set a static class.

edited Jun 22, 2020 at 9:03

answered Jun 22, 2020 at 8:48

Alexander Kim

18.5k24 gold badges111 silver badges165 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 01:03:18Z

-1

You have to use props to pass attributes to components https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

edited Jul 15, 2022 at 1:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 15, 2018 at 17:29

miorey

1,0008 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to apply classes to Vue.js Functional Component from parent component?

3 Answers 3

TL;DR;

Explanation:

Example:

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

TL;DR;

Explanation:

Example:

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related