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>

所以我的问题是：

为了使

{{globalErrorMessage}}

正常工作，我是否需要在siteheader.vue中为此数据创建

prop

如果需要创建

道具

，如何将任何

加载组件中的数据传递到siteheader.vue道具

上述操作似乎不可能实现，因为newpost.vue永远不会与siteheader.vue建立父/子关系。它们在同一级别上是同级的，那么一个组件如何侦听另一个组件的发射事件呢

鉴于此，我是否要在siteheader.vue中创建

data（）{return{globalErrorMessage:“}}}

，然后使用

computed

方法来更改此数据？如果是，newpost.vue如何访问siteheader.vue中的方法来更改错误消息的数据字段

最后，以上这些都是胡说八道吗？

Vuex

状态管理是一条出路吗？这似乎也不正确，因为每个错误对该访问者都是唯一的。不必为错误维护状态

---

我不知道如何解决这一问题，因此产生了上述问题。

尽管

Vuex

是一个优雅的选项，尤其是当应用程序变得更复杂时，您可以使用

事件总线

将消息从第一个组件发送到第二个组件：

事件总线.js:

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

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

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

newpost.vue:

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

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

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

siteheader.vue:

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

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

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

---

尽管

Vuex

是一个优雅的选项，尤其是当应用程序变得更复杂时，您可以使用

事件总线

将消息从第一个组件发送到第二个组件：

事件总线.js:

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

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

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

newpost.vue:

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

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

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

siteheader.vue:

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

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

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

是的，如果您希望您的组件不依赖于全局状态，只需显示提供该组件的消息。如果您认为它是一个可以访问全局状态的组件（如vuex），那么就不需要使用prop。您甚至可以仅为此组件在vuex中注册自定义模块

无法直接将数据从子级向上传递到父级，或者需要更新中心状态，其中子级更新数据，父级显示数据，或者需要从子级发出事件，父级侦听并更新其同级，或者通过自定义事件总线

您可以通过它们的父级执行此操作，App.vue将需要管理该数据流

在组件外部更改组件的本地状态是不好的，即使您可以进行黑客攻击。你应该把数据作为道具而不是道具传递

Vuex仅存在于内存中，例如，它是“每浏览器”选项卡，除非您选择localStorage作为永久性存储，即使选择localStorage作为永久性存储也是如此。这意味着，人们不会共享彼此浏览器的vuex状态

这些都是我脑子里想不出来的

是的，如果您希望您的组件不依赖于全局状态，只需显示提供该组件的消息。如果您认为它是一个可以访问全局状态的组件（如vuex），那么就不需要使用prop。您甚至可以仅为此组件在vuex中注册自定义模块

无法直接将数据从子级向上传递到父级，或者需要更新中心状态，其中子级更新数据，父级显示数据，或者需要从子级发出事件，父级侦听并更新其同级，或者通过自定义事件总线

您可以通过它们的父级执行此操作，App.vue将需要管理该数据流

在组件外部更改组件的本地状态是不好的，即使您可以进行黑客攻击。你应该把数据作为道具而不是道具传递

Vuex仅存在于内存中，例如，它是“每浏览器”选项卡，除非您选择localStorage作为永久性存储，即使选择localStorage作为永久性存储也是如此。这意味着，人们不会共享彼此浏览器的vuex状态

---

这些都是我脑子里想不到的。

是的，你应该使用vuex，这是真相的核心来源。如果要避免vuex，请使用vue portal。一般来说，使用vuex不会有什么坏处，而且随着项目的发展，您会看到它的好处。是的，您应该使用vuex来实现这一事实的核心来源。如果要避免vuex，请使用vue portal。一般来说，使用vuex不会造成伤害，随着项目的发展，您会看到它的好处如果每个错误都是该访问者独有的，vuex如何确保其他用户不会看到与其他用户相同的错误？@volumeone

vuex

是绑定到web应用程序的客户端存储，所以它只存储每个实例/用户的数据看起来我需要在vuex上阅读，因为我认为它是应用程序范围的状态管理，所以如果有人单击“like”，每个人的组件都会更新，以显示“like”@volumeone不，它不是一个公共数据库，它被用作SPA的全局数据源。您可以从这里开始：如果每个错误都是该访问者独有的，Vuex如何确保其他用户不会看到与其他用户相同的错误？@volumeone

Vuex

是绑定到web应用的客户端存储，所以它只存储每个实例/用户的数据看起来我需要在vuex上阅读，因为我认为它是应用程序范围的状态管理，所以如果有人单击“like”，每个人的组件都会更新，以显示“like”@volumeone不，它不是一个公共数据库，它被用作SPA的全局数据源。你可以从这里开始：