БЭМ-микс и Vue.js?

Question

[egyptForce]

Возможно ли во Vue.js реализовать микс блока и элемента при использовании вложенных компонентов?

Хочу получить это:

<div class="component1">
  <div>component1</div>
  <div class="component1__elem component2">
    <div>component2</div>
  </div>
</div>

Но получается это:

<div class="component1">
  <div>component1</div>
  <div class="component2">
    <div>component2</div>
  </div>
</div>

Код

<div id="app">
  <component1>
    <component2/>
  </component1>
</div>

Vue.component('component1', {
	template: `
  <div class='component1'>
  	<div>component1</div>
  	<slot class='component1__elem'></slot>
  </div>`
});

Vue.component('component2', {
	template: `
  <div class='component2'>
  	<div>component2</div>
  </div>`
});

new Vue({
	el: '#app'
});

Answer 1

[Павел Коковин]

Ну так всё верно получается) в слот таким образом никак класс не передать)
1. Если так нужна бэм нотация, то оберни слот в див с классом потомка
2. Но лучшим вариантом, на мой взгляд, будет избавиться от этой нотации, и вот почему:
Глупые vue компоненты не должны быть большими и могут содержать больше одного блока только в рамках исключения. Из этого следует вывод, что хоть методология БЭМ и остается почти неизменной, но всю бэмовскую нотацию во vue файлы тащить не стоит. Для примера: можно избавиться от добавления класса блока беред классами элементов, так как блок один, а классы уникальные благодаря scoped. (Единственное - нужно учитывать, что к рутовому блоку по классу может обратиться родитель компонента, но это уже частности)

Comments

[Павел Коковин]

Ещё отмечу, что если вдруг нужно управлять внешними отступами и положением дочернего элемента, то делать это правильней из той же точки, откуда в компонент поступают данные, то есть в данном случае от рутового компонента, где у тебя вложенные один в другой component

[egyptForce]

Павел Коковин, спасибо за ответ) опыт и знания полученые за почти год дали понимание, что нефиг этот бэм тащить во vue, все и без него прекрасно работает с css-модулями и правильной настройкой вебпака

Answer 2

[Александр Логинов-Солоницын]

Это банально работает из коробки:

<div id="app">
  <component1>
    <component2 class="component1__elem" />
  </component1>
</div>

Методолгия БЭМ просто идеально вписывается в проекты на Vue.
https://codepen.io/login2030/pen/mdygVRd?editors=1010