Передача css классов в компонент — вывести эти классы не на root элементе, на дочернем?

Question

[Роман Сарваров]

Всем привет.
Представим, есть компонент FormButton - обычный html кнопка, но не просто <input />, а обернутая в какой-то контейнер, типа:

<div class="col-12">
   <input />
</div>

Вопрос следующий:
Я хочу передать в этот компонент параметры, например, в виде классов:
<FormButton class="btn-danger" />
В таком случае, как вы понимаете, класс будет присвоен рутовому div'у, а мне нужно, чтобы присваивался на кнопку.
Можно ли как-то указать в настройках компонента, что входящие HTML параметры накладывать не на ROOT элемент компонента, а на какой-то другой?

Answer 1

[0xD34F]

Сделайте компонент функциональным, там классы (как и прочие атрибуты) не цепляются автоматически к корню, можно самостоятельно выбирать, кому их следует добавить:

functional: true,
render(h, ctx) {
  return h('div', {
    class: 'col-12',
  }, [
    h('input', {
      class: [ ctx.data.class, ctx.data.staticClass ],
    }),
  ]);
},