Разбор данных из одного компонента в другой в vueJS

Question

Я новичок в Vue, и я работаю с массивами данных, которые я должен связать каждый элемент на одной странице, где я покажу более подробную информацию о ITem.

Вот уведомление данные l oop, которые при каждом нажатии на них должны приводить пользователя к деталям об уведомлении.

<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>

Теперь: проблема, с которой я сталкиваюсь, заключается в создании другого компонента и возможности получения данных из выбранного уведомление в компонент.

Answer 1

Можно использовать глобальный компонент шины событий с шаблоном публикации / подписки.

Вот публикация , описывающая, как он работает.

Чтобы подвести итог, создайте глобальный компонент:

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

Используйте его в компоненте издателя:

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

Использование данных в компоненте слушателя:

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