Как передать данные между компонентами, если они оба подключены в третьем компоненте?

Question

[nastya_zholudeva]

У меня есть компонент goodsGrid, внутри него подключаются еще 2 компонента: <CardProduct/> и <InfiniteItems @:items="setItems" />
Конструкция @:items="setItems" передает данные из <InfiniteItems @:items="setItems" /> в goodsGrid с помощью метода setItems и кладет их вitems: [].

Вопрос, как можно теперь этот заполненный массив items в <CardProduct/> для дальнейшего его использования?

UPD: иными словами: есть компонент goodsGrid, внутри него подключаются еще 2 компонента: <CardProduct/> и <InfiniteItems @:items="setItems" />. В <InfiniteItems @:items="setItems" /> хранятся данные. Как их передать в <CardProduct/>

Comments

[Сергей delphinpro]

Если по фен-шую — то vuex
В простых случаях можно обойтись EventBus

Answer 1

[lavezzi1]

Какая то сложна хрень у вас. В любом случае вы должны сформировать items внутри goodGrid и передать их через props внутрь CardProduct и InfiniteItems. Это если совсем просто. Можно также через vuex.

Comments

[nastya_zholudeva]

lavezzi1, я немного не точно написала, сейчас поправила вопрос. Данные у меня хранятся в<InfiniteItems @:items="setItems" />. Как мне с такой конструкцией компонентов передать их в <CardProduct/> ?

[lavezzi1]

nastya_zholudeva, с InfiniteItems можно получить данные вверх через this.$emit(), в goodGrid отловить их, сохранить и передать в CardProduct.

[nastya_zholudeva]

lavezzi1, у меня сейчас в InfiniteItems в watch (т.к. нужно следить за изменением данных) есть такая конструкция this.$emit('items', val). Она как раз с помощью @:items="setItems" в goodGrid передает данные и goodGrid обрабатывает их в методе

setItems(res) {
                this.items = res;
            },

А как дальше быть я не знаю

[lavezzi1]

this.items - тут я так понимаю нужные данные лежат в goodGrid, верно? Так передавайте теперь их через prop в CardProduct.

[nastya_zholudeva]

lavezzi1, а как я могу с помощью props передать из goodGrid (родительского) в CardProduct?

this.items - тут я так понимаю нужные данные лежат в goodGrid

верно

[lavezzi1]

<good-grid>
     // передаем items из good-grid в CardProduct
    <card-product :data="items"></card-product>
</good-grid>

внутри CardProduct

export default {
    name: 'card-product',
    props: {
       data: { type: Array, default: () => [] }
    }
}

Answer 2

[hopeful_romantic]

А почему бы не использовать для этой цели vuex ?
Все равно, рано или поздно, будете использовать его в своих проектах на vue.js
Там нет ничего сложного в изучении, а работу довольно-таки упрощает.
https://www.youtube.com/watch?v=2CSr2vBApSI&list=P...