Madeas
@Madeas
UI / UX Designer, Frontend Developer

Правильно ли делать компоненты большими?

Изучаю vue и периодически просматриваю код сайтов, в которых почти вся страница (статика) состоит из компонентов, например:
<site-navigation></ ... >
<site-masthead></ ... >
<site-content></ ... >
<site-bars></ ... >
<site-footer>

и другие.

Но при этом, сама страница выглядит масштабно, с кучей текста и картинок. Отсюда вопрос: уместно ли использовать компоненты так? Я использую их для встраивания некоторых элементов типа .card, слайдеров и прочих мелких блоков. Но правильно ли будет совать в компонент целую таблицу из 50+ позиций, записи из блога или создавать через компонент модалку, в которую выводить огромный список типа прайса? Весь текст, как я понимаю, находится в js-файле. Или лучше писать обычный html/pug и не заморачиваться на счет объема?
  • Вопрос задан
  • 1576 просмотров
Решения вопроса 3
coderisimo
@coderisimo
Идея в том, что вы пишете компонент таблицы. Ему все равно сколько там будет строк. Он получает некий массив объектов и в соответствии с этими данными создает таблицу на странице. В таблице может быть 5 строк, а может и 500. В том то профит компонентов. Вы создали компонент таблицы, который принимает определенный формат данных и теперь вы можете вставлять его в разные места сайта, скармливать ему разные наборы данных. И каждый раз все будет работать , как надо.
А если понадобятся изменения, вы просто измените сам компонент и везде где он используется, во всех 10 местах на сайте, ваш компонент будет модифицирован автоматически.
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Весь текст, как я понимаю, находится в js-файле.

Не понимаете. Очевидно, вы не слышали про разделение представления и содержания. Никто никакие "таблицы из 50+ позиций", "записи из блогов" и т.д. в компоненты не зашивает. Данные подгружаются отдельно. И размещаются в заранее подготовленных местах.

То есть, вместо

<tr>
<tr>
...
<tr>

должно быть

<tr v-for="n in data">

loadData() {
  fetch(...).then(r => r.json()).then(r => this.data = r);
},
Ответ написан
Madeas
@Madeas Автор вопроса
UI / UX Designer, Frontend Developer
решил при помощи axios и json. Не знаю насколько это норм, но наброски работают, осталось все собрать и оформить. Всем спасибо за помощь!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
vetero4eg
@vetero4eg
Frontend
Посмотрите какую-нибудь книгу, мастер-класс или курс по vue, основательно, по порядку. Лучше что-то одно, но от и до. У вас есть системное непонимание подхода, это точечными вопросами нормально не решить.
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
Там скорее всего иерархическая структура компонентов.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы