Parsing data from one component to another in vueJS

Question

I am new to Vue and I'm working with arrays of data which I have to link each item to a single page where I'll show more details about the ITem.

Here's a notification data loop which when each is clicked should take a user to details about the notification.

<div v-for="(item, i) in userNotifications.data" :key="i" class="notification_row" :class="{'checked': checked }" @mouseover="hover = true" @mouseleave="hover = false">
  <label class="chkbox">
    <input type="checkbox" v-model="checked">
  </label>
    <div class="notification_title">
      {{ item.title }}
    </div>
    <div class="notification_desc">
      {{ item.description }}
    </div>
    <button v-if="hover" class="notification_date delete_BTN" @click="delete(item.id)">
      Delete
    </button>
    <div v-else class="notification_date">
      {{ formateTime( item.createdAt )}}
    </div>
</div>

Now: The issue I'm facing is creating another component and been able to get data from a selected notification into the component.

Answer 1

One can use a global event bus component with publish/subscribe pattern.

Here is a post describing how it works.

To sum up, create a global component:

// eventbus.js
import Vue from 'vue'; 
export const EventBus = new Vue();

Use it in the publisher component:

//publisher.js
// ...
methods: { 
    publishEvent() {
         EventBus.$emit('topic',this.dataPublished); 
} }

Consume data in the listener component:

// listener.js
const eventHandler = function(data) { console.log(`Oh, that's nice. It's gotten ${data} ! :)`) } 
// Listen to the event. 
EventBus.$on('topic', eventHandler);