Как организовать кастомизацию компонентов?

Question

[eugenedrvnk]

Есть, к примеру, компонент Parent.vue, которые в себе рендерит другие компоненты:

<div class="parent">
  <Child1 class="child1">
    <Child2 class="child2">
    </Child2>
  </Child1>
</div>

Мне нужно что бы в какой-то ситуации текст в компонент Child2 становился красным. Я вижу следующие варианты решения :

- повесить класс модификатор "parent_child2_red" и в этом классе указать :

.child2 {
    color: red;
  }

- добавить в Parent.vue опцию вроде color" и тогда Parent будет выглядеть следующим образом :

<div class="parent">
  <Child1 class="child1">
    <Child2 :class="{child2: true, child2_color_red: childRedColor}">
    </Child2>
  </Child1>
</div>

props: {childRedColor: Boolean}

//

<Parent :childRedColor="true" />

- или же добавить пропс для передачи классов, которые будут применены к Child2?

<div class="parent">
  <Child1 class="child1">
    <Child2 :class="'child2' + child2Classes.join(' ')">
    </Child2>
  </Child1>
</div>

props: {child2Classes: Array}

// 

<Parent :child2Classes="['child2_color_red']" />

Понимаю, что все эти варианты решают "задачу", но возможно какой-то из них считается более правильным?

Answer 1

[Alex]

А выбирает цвет кто? Компонент parent? Или кто-то выше?
Если второй случай, тогда, полагаю, пропсы в любом виде, или inject.

Иначе, такой вопрос: Текст может быть только красным? Или существует вероятность что понадобится другой цвет? Если второй вариант, тогда, полагаю, кастомное свойство будет уместно:

<template>
<div class="parent">
  <Child1 class="child1">
    <Child2 class="child2" :style="'--text-color: ' + textColor">
    </Child2>
  </Child1>
</div>
</template>

Иначе, просто добавляйте класс, так как вам удобно исходя из конкретного случая.

P.S. С БЭМ не работал, поэтому рекомендации могут не соотносится с данной методологией.