Передача данных по клику в другой компонент

Question

Начал изучать Vue.js и зашел в тупик на вот такой задаче. Имеются два компонента, которые отображаются на одном шаблоне. Первый компонент получает по API данные которые я вывожу в этом же компоненте через v-for и формируются карточки. Далее мне нужно, чтобы при клике на одну из карточек, ее параметры(id, title) передавались в другой компонент и там так же обрисовывались карточки. Вопрос следующего характера, как передать эти данные по клику на выбранную карточку. По логике я понимаю, что нужно воспользоваться v-on:click="function(param.id, param.title, param.image)" и в этой функции получить нужные мне данные и сформировать массив или объект на свое усмотрение. Но вопрос как из этой функции передать данные в другой компонент. Буду благодарен за любые советы. Спасибо.

Компонент 1

<template>
<div class="params">
<div v-for="param in params" :key="param" @click="function(param.id, param.title,   
param.image)">
<img :src="param.image" alt="logo">
<p>{{ param.title }}</p>
</div></div>
</template>
<script>
export default {
methods: {function(image, title, audio) {
        let res = {image: image, title: title, audio: audio}
    },
}
}
</script>

Answer 1

Для таких дел лучше использовать

Vuex

<div>
     <div class="params">
         <div v-for="(param, index) in params" 
              :key="index" 
              @click="getItem(param ,index)">
             <img :src="param.image" alt="logo">
             <p>{{ param.title }}</p>
         </div>
     </div>
</div>

import { mapActions } from 'vuex'

methods: {
    ...mapActions(['getSelectedItemData']),
    getItem (item, index) {
        let payload = {data:item, id:index}
        this.getSelectedItemData(payload)
    },
}

// во vuex
            mutations: {
                setSelectedItemData ({ state }, payload) {
                    state.selectedItem = payload.data
                }
            }
            
            actions:{
                getSelectedItemData ({ commit }, payload) {
                    commit('setSelectedItemData', payload)
                }

            }

И далее уже в компоненте где нужно вывести данные обращаемся к store примерно так this.$store.state.selectedItem

И есть варинат c event В этом варианте я использую глобальный event

// в main.js
window.events = new Vue();

\

// Вариант второй через bus
events.$emit('selectedItem', {item, index})

// принимае данные в другом компоненте 
events.$on('selectedItem', e => {
      console.log(e)
      // выполняем операции с данными
      })

БЛОГ НА HUSL

Передача данных по клику в другой компонент

Ответы (1 шт):