在 vueJS 中将数据从一个组件解析到另一个组件

Question

我是 Vue 的新手，我正在处理数据数组，我必须将每个项目链接到一个页面，我将在其中显示有关 ITem 的更多详细信息。

这是一个通知数据循环，当点击每个循环时，用户应该会看到有关通知的详细信息。

<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

可以使用具有发布/订阅模式的全局事件总线组件。

这是一个 post 描述它是如何工作的。

总结一下，创建一个全局组件：

// 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);