Как сделать универсальный компонент, если при подключении к разным страницами используются разные данные?

Question

[nastya_zholudeva]

есть компонент, который должен стать универсальным (с этим и возникли трудности). Суть компонента в том, что он с помощью сначала created получает данные с API и сохраняет в data (this.goods). Потом с помощью метода также получает еще данные и конкатенирует с теме, что уже есть (this.goods = this.goods.concat(data.data.data)). Потом с помощью этих this.goods и наполняется верстка данными.
Проблема состоит в том, что в зависимости от того, к какой странице сайта сайта подключен, может быть this.goods или this.brends или this.shops и т.д. Что и как в коде компонента и/или в верстке страницы нужно сделать, чтобы компонент стал универсальным

UPD: я в своем "универсальном" компоненте получаю с API данные и

this.goods = res.data.data;
this.$root.$emit('goods', this.goods);

потом на той странице, где мне надо создаю

data() {
        return {
            items:[],
    },

и

mounted: function () {
        this.$root.$on('goods', goods => {
            this.items = goods
        });
    },

и потом в верстке уже через items отображаю нужное.

Может есть правильнее и лучше способ?

Comments

[Виктор Л]

Чет по моему с самой логикой компонента не то, если у вас компонент только работает с API, то по идее в него нужно передавать фильтр, а сам сервер Вам должен уже вернуть нужные данные с учетом фильтра. Если Вас сервер возвращает вам Все данные без фильтра то тогда по идее вам нужно компонентом фильтровать эти данные сгруппировать или отфильтровать по нужному признаку (goods,shops,shops)

Answer 1

[alvvi]

Не совсем понятно, зачем вам разные названия свойств, но в целом ничто не мешает сделать их динамическими

let type = 'goods'; // Здесь можно получить строку из страницы любым удобным способом
this[type] = this[type].concat(data.data.data)

Comments

[nastya_zholudeva]

Илья Ростопка, я в своем "универсальном" компоненте получаю с API данные и

this.goods = res.data.data;
this.$root.$emit('goods', this.goods);

потом на той странице, где мне надо создаю

data() {
        return {
            items:[],
    },

и

mounted: function () {
        this.$root.$on('goods', goods => {
            this.items = goods
        });
    },

и потом в верстке уже через items отображаю нужное.

Может есть правильнее и лучше способ?

[alvvi]

nastya_zholudeva, так если у items одинаковая верстка, зачем их называть как-то по-разному, зовите их items везде, иначе совсем не DRY будет.

this.items = res.data.data;
this.$root.$emit('items', this.items);

this.$root.$on('items', items => {
    this.items = items
});

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