时间戳

首页 > 解决方案 > 如何在未嵌套的组件之间传递数据？

javascript - 如何在未嵌套的组件之间传递数据？

问题描述

我有一个vue由 vue 组件组成的应用程序。基本页面是App.vue这样的：

<template>    
 <div id="app">
      <site-header></site-header> <!-- This is a vue component -->
        <div>
          <router-link :to="{ path: '/new'}">New Post</router-link>
          <router-view></router-view> <!-- newpost.vue will be loaded here -->
        </div>
      <site-footer></site-footer> <!-- This is a vue component -->
    </div>
</template>

当用户单击链接时，会加载一个视图，其中包含一个允许用户创建新帖子New Post的单个文件。component这component被称为newpost.vue。

该site-header组件有一个div区域需要在应用程序中显示可能来自任何其他错误的区域component......因为site-header所有页面上都存在：

网站头文件.vue

<template>
  <header>
   <div id="global-error">
   <p> {{globalErrorMessage}} </p> <!-- Need to display error messages here -->
   </div>
  </header>
</template>

所以我的问题是：

  1. 为了开始{{globalErrorMessage}}工作，我是否需要prop在siteheader.vue中为这些数据创建一个？
  2. 如果我需要创建一个prop，如何将数据从任何<router-view>加载的组件传递到siteheader.vue道具？
  3. 以上似乎是不可能的，因为newpost.vue永远不会与siteheader.vue有父/子关系。它们是同一级别的兄弟姐妹，那么一个组件如何监听另一个组件的发出事件？
  4. 鉴于此，我是否data(){ return {globalErrorMessage: "" } }在siteheader.vue中创建，然后有一个computed可以更改此数据的方法？如果是这样，newpost.vue如何访问 siteheader.vue 中的方法来更改错误消息的数据字段？
  5. 最后，以上所有这些都是胡说八道Vuex吗？状态管理是要走的路吗？这似乎也不正确，因为每个错误对于该访问者都是唯一的。不必为错误维护状态。

我不知道如何解决这个问题，因此有上述问题。

标签： javascriptvue.jsvuejs2vue-componentvuex

解决方案

虽然Vuex这是一个优雅的选择，尤其是在应用程序变得更复杂的情况下，您可以使用 anevent-bus将消息从第一个组件发送到第二个组件：

事件总线.js：

import Vue from 'vue';
export const EventBus = new Vue();

新帖子.vue：

import { EventBus } from './event-bus.js';
...
EventBus.$emit('set-global-error-message', 'Something went wrong');

站点标题.vue：

import { EventBus } from './event-bus.js';
...
created() {
  EventBus.$on("set-global-error-message", this.setGlobalErrorMessage);
},
methods: {
  setGlobalErrorMessage(errorMessage) {
    this.globalErrorMessage = errorMessage;
  },
},

推荐阅读