@megakor
PHP погроммист | Vue авантюрист | ru.sarvarov.dev

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

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


Вопрос следующий:
Я хочу передать в этот компонент параметры, например, в виде классов:
<FormButton class="btn-danger" />
В таком случае, как вы понимаете, класс будет присвоен рутовому div'у, а мне нужно, чтобы присваивался на кнопку.
Можно ли как-то указать в настройках компонента, что входящие HTML параметры накладывать не на ROOT элемент компонента, а на какой-то другой?
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Сделайте компонент функциональным, там классы (как и прочие атрибуты) не цепляются автоматически к корню, можно самостоятельно выбирать, кому их следует добавить:

functional: true,
render(h, ctx) {
  return h('div', {
    class: 'col-12',
  }, [
    h('input', {
      class: [ ctx.data.class, ctx.data.staticClass ],
    }),
  ]);
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы