Как проектировать компоненты во Vue.js?

Question

[Даниил]

Прочитал БЭМ и интересуюсь как проектировать во Vue.js компоненты, которые можно собирать и тем самым делая код короче. Например есть кнопка Click она компонент button.vue. Меняю ей текст через v-slot, а если цвет поменять, то как? Через props? Или можно через class? Как более правильно?

Answer 1

[Михаил]

Берите пример с уже готовых наборов https://www.codeinwp.com/blog/vue-ui-component-lib...

<md-button class="md-primary">Primary</md-button>
<v-btn small color="primary">Primary</v-btn>
<fish-button type="primary">Primary</fish-button>
<q-btn color="primary" label="Primary" />
<el-button type="primary">Primary</el-button>
<b-button variant="success">Button</b-button>
<Button type="primary">Primary</Button>
<Button primary">Primary</Button>

+ как совет из опыта
Почитайте про utility-first подход

https://blog.usejournal.com/utility-first-css-ridi...
https://frontstuff.io/in-defense-of-utility-first-css
... и прочее из гугла

Как минимум отступы не входят в сам компонент, так что их нужно ставить отдельно, так как отступ это пустое пространство от 1 и до 2го компонента

пример

<md-button class="u-mb20 md-primary">Primary</md-button>

Comments

[Sergey Romanov]

q-btn++

[Даниил]

Спасибо