Как понять компонент это или нет в vue?

Question

[NaumovInnokentiy253]

Добрый день. Перешел на vue. И при создании приложений стал возникать вопрос, а отдельный ли это компонент или можно обойтись классами. Например есть кнопка, разного тип, допустим красная, зеленая, синяя. Ее можно сделать отдельным компонентом например AppButton и в параметры указать ее тип, а в компоненте, в зависимости от типа добавлять класс. Но тоже самое можно сделать и просто классами, и добавлять их вручную. Такой же пример можно привести с Input. Так вот вопрос, как понимать когда нужно создавать отдельный компонент, а когда можно обойтись классами.

Answer 1

[Алексей Скляров]

Компонент создается не для того чтобы на него просто навешивать классы (как в вашем случае с кнопкой). Компонент - это, утрированно, предмет, для которого определена своя работа, свои данные и тд. Компоненты удобно использовать, когда у вас на сайте должны быть объекты одного типа (например, графики), но с разными данными.

Например, компонент Button в вашем случае не очень нужен пока, например, не придется этим кнопкам навешивать обработчики событий (которых определенно некоторое конкретное количество).

Легко понять на примере обычных шаблонов постов любой CMS, они как правило вынесены в отдельный файл. Не всегда понятно где на сайте они используются, но всегда можно наверняка поправить В ОДНОМ МЕСТЕ шаблон поста и быть уверенным, что он поменяется везде.

Так же и с вашей кнопкой. Вы можете создать компонент Button, зная, что возможно эти кнопки надо будет дополнить какими-то properties, либо изменить структуру самой кнопки.

Button это слишком простой пример в вашем случае. Вам нужно понимать, что у компонента существуют свои данные, методы, watchers событий и тд. И как только вам что-то из этого понадобится - вы используете компонент.