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

Question

[Andrej Sharapov]

Изучаю vue и периодически просматриваю код сайтов, в которых почти вся страница (статика) состоит из компонентов, например:

<site-navigation></ ... >
<site-masthead></ ... >
<site-content></ ... >
<site-bars></ ... >
<site-footer>

и другие.

Но при этом, сама страница выглядит масштабно, с кучей текста и картинок. Отсюда вопрос: уместно ли использовать компоненты так? Я использую их для встраивания некоторых элементов типа .card, слайдеров и прочих мелких блоков. Но правильно ли будет совать в компонент целую таблицу из 50+ позиций, записи из блога или создавать через компонент модалку, в которую выводить огромный список типа прайса? Весь текст, как я понимаю, находится в js-файле. Или лучше писать обычный html/pug и не заморачиваться на счет объема?

Comments

[jeruthadam]

Бред какой-то

[Сергей Некрасов]

Конечно лучше в компонент вынести, если не хотите потом пролистывать портянку компонента. Таблицу так же можно разбить на компоненты и динамически импортить.

[alex-1917]

Весь текст, как я понимаю, находится в js-файле.

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

Answer 1

[coderisimo]

Идея в том, что вы пишете компонент таблицы. Ему все равно сколько там будет строк. Он получает некий массив объектов и в соответствии с этими данными создает таблицу на странице. В таблице может быть 5 строк, а может и 500. В том то профит компонентов. Вы создали компонент таблицы, который принимает определенный формат данных и теперь вы можете вставлять его в разные места сайта, скармливать ему разные наборы данных. И каждый раз все будет работать , как надо.
А если понадобятся изменения, вы просто измените сам компонент и везде где он используется, во всех 10 местах на сайте, ваш компонент будет модифицирован автоматически.

Comments

[Andrej Sharapov]

вопрос не совсем в этом.

Например, вот мой компонент:

Vue.component('ric-equipment', {
    props: ['slides'],
    template: `
    <div id="slider">
        <template v-for="(sl, index) in slides" :key="index">
            <div class="slide drag">
                <img @dblclick="$emit('select', sl)" :src="sl.src" :alt="sl.alt">
            </div>
        </template>
    </div>
    `,
});

вопрос в том, куда девать содержимое data и как его выводить? В данном случае все ясно, прописываю в js

slides: [
                //- 27 slides
                {
                    src: 'src/slider/1.jpg',
                    alt: ''
                },
                {
                    src: 'src/slider/2.jpg',
                    alt: ''
                },
                {
                    src: 'src/slider/3.jpg',
                    alt: ''
                },
                {
                    src: 'src/slider/4.jpg',
                    alt: ''
                },
                {
                    src: 'src/slider/5.jpg',
                    alt: ''
                },
                {
                    src: 'src/slider/6.jpg',
                    alt: ''
                },

Тут вроде все просто. Но если это таблица с кучей текста? прописывать все это в js? Это же бред и гемор, особенно если есть встроенный html. Есть другой способ?

Как я понял, есть подгрузка содержимого в компонент из другого файла. Но я не знаю как она работает. Сайт статика, без БД.

[coderisimo]

Andrej Sharapov, ну, прочитайте мой ответ

Ему все равно сколько там будет строк. Он получает некий массив объектов и в соответствии с этими данными создает таблицу на странице.

зачем это прописывать в JS ? вы , либо передаете эти данные через пропсы , а перед эти получаете их с севера в json в другой части вашего приложения , либо сам компонент при инициализации делает запрос и получает данные, которые затем будет использовать для создания таблицы.

Машина отдельно - бензин отдельно. А вы ,судя по всему, сразу машину с бензином делаете )))

[Andrej Sharapov]

Василий,
Он получает некий массив объектов - откуда?
т.е. сам текст прописывать в .json и выводить в компонент? если да, то чем (как)?

Накидал в json

{
    "title": "ТУТ ЗАГОЛОВОК ТАБЛИЦЫ",
    "thead": [
        {
            "name": "НАИМЕНОВАНИЕ ОБЪЕКТА",
            "caption": "ОПРЕДЕЛЯЕМАЯ ХАРАКТЕРИСТИКА (ПОКАЗАТЕЛЬ)"
        }
    ],
    "tbody": [
        {
            "name": "",
            "capt": ""
        },
        {
            "name": "",
            "capt": ""
        },
    ],
}

Я просто с этим еще не сталкивался. Извините, если жестко туплю...

[coderisimo]

Andrej Sharapov,

получаете их с севера

не страшно, я сам туплю постоянно . ))))

axios.get('/time-tracker/index/get?id=' + id).then(function (response) {
                        if (response.data.errors) {         
                            alert(Object.keys(response.data.errors)[0] || 'Error');
                            return;
                        }
                        that.fields = response.data.result; // вот здесь мы получили данные с сервера

.......

[Ольга Ветер]

Andrej Sharapov, подгрузка из рядом расположенного json файла либо через vuex, смотря что там удобнее по ситуации

[Andrej Sharapov]

Ольга Ветер, сделал 1 вариант. Vuex еще не знаю)

[Ольга Ветер]

Andrej Sharapov, ну если я правильно задачу поняла, тут так наверное и правильнее.

Answer 2

[0xD34F]

Весь текст, как я понимаю, находится в js-файле.

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

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

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

должно быть

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

loadData() {
  fetch(...).then(r => r.json()).then(r => this.data = r);
},

Comments

[Andrej Sharapov]

вы правы, еще не знаком.
то есть можно создать отдельный .json / .vue шаблон с содержимым и подгружать на сайт компонентом через js файл? для этого надо подключать на сайте вью-роутер?

[0xD34F]

Andrej Sharapov, ну и каша же у вас в голове... Роутер тут не при чём; что значит "подгружать компонентом через файл" я без понятия (сами-то понимаете, что сказали? не уверен); "шаблон с содержимым" - ну ё-моё, вы значение слова "разделение" понимаете? Нет? Толковый словарь откройте и посмотрите. "Шаблон" - отдельно, "содержимое" - отдельно (грузится из БД, например).

[Andrej Sharapov]

0xD34F, я про это. может не то понял...

[0xD34F]

Andrej Sharapov, а может, вы не поняли, что не поняли? ВАМ ЧЕГО НАДО-ТО, А??!

[Andrej Sharapov]

0xD34F, Большой объем в компонентах Vue? :)

[0xD34F]

Andrej Sharapov, т-а-а-а-к, то есть, предлагаете бегать по комментариям к чужим ответом. Нет, так не будет.

А что вы хотели сказать этим:

:)

я вообще не понял. Объяснитесь.

[Andrej Sharapov]

из другого ответа я понял, что весь ТЕКСТ можно закинуть в json файл и из него загружать в мой компонент.
Не ясно, как это сделать, куда смотреть.

[0xD34F]

Andrej Sharapov, ну идите погуглите, как это сделать. Если уже - рассказывайте, что конкретно не получается.

[alex-1917]

Andrej Sharapov,

весь ТЕКСТ можно закинуть в json файл

это сугубо для наглядности, часто используется в говно-уроках и криворуких видеогайдах.
ну или для домашней странички Васи Залупкина, где три странички и 5 строчек текста - тогда да, в самый раз.
читайте только первоисточники (Evan You), перестаньте лазить по ютубо-помойке.

в хороших гайдах ВСЕГДА идет комментарий, что json-файлик только для примера, не применять в продакшене, отечественные горе-инфо-бизнесмены этот пунктик стирают.

[Andrej Sharapov]

0xD34F, логично) вот только я не уверен в этом)

[Andrej Sharapov]

alex-1917,

в хороших гайдах ВСЕГДА идет комментарий, что json-файлик только для примера, не применять в продакшене, отечественные горе-инфо-бизнесмены этот пунктик стирают.

а куда тогда лучше загрузить содержимое с текстами?
Конечно, проще залить прямую таблицу на сайт и не напрягать мозг, но это не то решение))

Answer 3

[Andrej Sharapov]

решил при помощи axios и json. Не знаю насколько это норм, но наброски работают, осталось все собрать и оформить. Всем спасибо за помощь!

Answer 4

[Ольга Ветер]

Посмотрите какую-нибудь книгу, мастер-класс или курс по vue, основательно, по порядку. Лучше что-то одно, но от и до. У вас есть системное непонимание подхода, это точечными вопросами нормально не решить.

Comments

[Andrej Sharapov]

конечно, вы правы. но в данный момент приходится решать именно так :(
Можете посоветовать канал или видео урок? Буду признателен.

[Ольга Ветер]

Andrej Sharapov, ну тут уже кому что, можете попробовать вот тут посмотреть https://www.youtube.com/channel/UCg8ss4xW9jASrqWGP...
там в том числе есть видео по vuex, короткое, минут на 30 и достаточно емкое.
Хвалят курс Лаврика, думаю тоже можно рекомендовать.
Если хорошо с английским, много хороших курсов на udemy

Answer 5

[Антон Антон]

Там скорее всего иерархическая структура компонентов.