Как понять что нужно разделять компонент на новые компоненты (vue)?

Question

[Barring]

К примеру, есть компонент Button и у меня есть необходимость как-то её стилизовать, что бы она стала большой, я же не должен создавать новый компонент BigButton и в нём использовать Button? А логичнее вроде как будет просто пропсом указать что-то вроде size="big" и в Button либо подкрутить стили, либо сделать чёт другое, что требуется.

То есть, в моём понимание, смысл создавать другой компонент (BigButton), используя имеющийся (Button) есть тогда, когда нам нужно только добавить ему какого-то js функционала? Хотя тут можно по сути использовать тот же подход с пропсами и вот тут всё же непонятен немного момент, а когда же создавать новый компонент, а когда просто добавлять разную логику в действующий в зависимости от поступающих пропсов?

Answer 1

[Игорь]

Я бы сделал пропсом скорее всего. Например, size="large | middle | small"
Но как таковых жестких правил нету на сколько мне известно.

Answer 2

[Aetae]

Если общего функционала больше (условно) половины кода - один компонент. Если меньше - два компонента и один миксин.

Comments

[Barring]

Aetae, а к примеру, если есть ситуация : "мне нужно что бы кнопка выглядела как Button, но при нажатии на неё отправлялся запрос на сервер". Т.е. у меня есть дефолтный компонент Button и тут как я понимаю, 2 варианты развития пути :

- просто добавить функционал запроса на сервер к Button и через пропс в случае чего его активировать.
- либо создать компонент RequrestButton в котором будет вложен Button и при клике на него - будет идти запрос и получается если мне нужно использовать кнопку с отправкой запроса - просто юзать RequestButton.

Понимаю что в данном контексте вроде как проще подход с просто пропсами, но в каких ситуациях может быть более удобным вариант с подходом как в случае с созданием RequestButton?

[Aetae]

Проще подход с запросом по @click. =)

Разделение по функционалу тоже важная часть. "Button" в большинстве случаев не подразумевает по смыслу никаких запросов, так что тут нужен отдельный компонент.
Также в данном случае тут нет 2х вариантов Button. Есть код Button и есть дополнительный код поверх Button.

Если он нужно единожды, то RequestButton оборачивабщий Button - правильный вариант.
Или можно добавить универсальности и сделать компонент Request, которому можно положить в slot Button или любой иной компонент. Или директиву v-request-some. Или компонент, но не в который вкладывается кнопка, а наоборот - который вкладывается в кнопку и что-то делает с родителем. Разные варианты, в зависимости от нужд..)

Вообще компоненты должны быть как можно меньшего размера и собираться из других компонентов.

Answer 3

[Kutuzov_ska]

Золотое правило. Если поймал себя на том, что копипастишь больше 6-7 строк - выноси в отдельную функцию:)

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

Но тут я плохой советчик. Я почти никогда не делал такие компоненты. Обходился классами. А вот компоненты вроде Header, Footer, Cooments (комментарии) - делаю всегда.

Comments

[Игорь]

Comments*

[Kutuzov_ska]

Игорь, ..Ляяяяя, теперь во всех проектах переписывать ошибку!!! Хахха, Спасибо за поправление:)

[Игорь]

Kutuzov_ska, Вы верно шутите?) xDDDDD

[Barring]

Kutuzov_ska, а если к примеру мне в одной ситуации нужно что бы компонент выглядел так :

<div class="button">
    <div class="button__title/>
    <div class="button__desc/>
    <div class="button__image/> 
  </div>

А в другой ситуации я получал что-то вроде :

<div class="button">
    <div class="button__desc/>
    <div class="button__title/>
    <div class="button__subtitle/>
    <div class="button__image/> 
  </div>

То есть нужно много чего перестроить, отобразить сабтайтл и всякое такое.
Тут как бы вы сделали? В один компонент запихнули оба варианта кнопки и через пропс и v-if отображали какой-то из них? Или делали бы для каждой кнопки отдельный компонент?

[Kutuzov_ska]

Barring, По этому варианту. Один компонент. Да через props хороший вариант.
например

<ButtonComponent title="Kek" subtitle="Lol" size="big"></ButtonComponent>

А в
created () {} - как то работал с значениями, если есть title;

<div class="button" :class="size || 'medium'">
    <div v-if="title" class="button__title>{{title}}</div>
  </div>

И стили под каждый

<style scoped>
.big {
  height: 40px;
}
.medium {
  height: 30px;
}
.small {
  height:: 20px;
}
</style>

[Владимир Коротенко]

Barring, Почему не использовать слоты? По умолчанию минимум обвеса, если что то нужно добавить используете слоты.

[Kutuzov_ska]

Владимир Коротенко, Зачем ему в этом случае slot? Ему нужно передать title, subtitle в кнопку. slot думаю уместнее в других случаях. Ему придется же внутри кнопки писать именованные слоты. Props однозначно проще.

[Barring]

Kutuzov_ska, тут вы один момент упустили. В 1м варианте - порядок дивов : title - desc -image, во 2м варианте : desc - title -subtitle -image.

Т.е. мне либо строить такой компонент :

<div class="button">
  <template v-if="defaultOrder">
    <div class="button__title/>
    <div class="button__desc/>
    <div class="button__image/> 
  </template>

  <template v-else>
    <div class="button__title/>
    <div class="button__desc/>
    <div class="button__image/> 
  </template>
</div>

Либо строить 2 отдельных компонента

[Kutuzov_ska]

Barring, А, да. В таком бы случае я бы вообще делал через created(). Передавал бы через props значения,

props: [ /* ... */  ],
data: () => ({
  items: [];
}),
created () {
  // Если кнопка большая
  if (this.isBigButton) {
    this.items = { subClass: 'title', item: this.tite, /*... */ }
  } else {
    this.items = { /* ... */ }
  }
}

А в html уже

<div v-for="item in items" :key="item.subClass" :class="`button__${item.subClass}`" />

Почти тот же v-if, но логику в js

[Kutuzov_ska]

В вашем случае лучше один компонент и через js все делать. Потому что, потом может понадобиться повесить watch на нажатие, например вы будете писать админку и захотите все клики по кнопкам фиксировать - вам придется и в первом и во втором компоненте делать одно и то же, захотите все кнопки задизейблить - опять в двух компонентах и т.д.

[Aetae]

Barring, если нужно играть с порядком и вложенностью элементов, то либо разбивать на микрокомпоненты и подключать их в цикле в нужном порядке, либо отказаться от template для данного конкретного компонента и использовать render функцию: не стоит её бояться, функциональный подход бывает весьма удобен.