如何在组件之间共享数据Vue js答案

【问题标题】：How to share data between components Vue js如何在组件之间共享数据Vue js
【发布时间】：2018-05-15 08:50:24
【问题描述】：

您好，我看到帖子在谈论这个，但我很难理解我必须做什么才能在组件之间共享数据，我不想使用事件总线，所以你能告诉我如何使用道具吗？

组件 A：

<template>
  <div>
    <div class="container">

                  <fileForm></fileForm> //<--- THE COMPONENT B      
        </div>
      </div>
</div>
</template>

<script>

export default {

  name: "DashBoard",
  data() {
    return {
      user: {},
    };
  },
  methods: {
    checkIfImLoggedIn() {

      }
    },
    onComplete() {
    },
  },
  mounted() {
    this.checkIfImLoggedIn();
  }
};
</script>

组件 B：

<template>
  //...
</template>

<script>
export default {
  name: "FileForm",
  data() {
    return {
      fileExtensions: ["CSV", "EXCEL"],
      sharedData : {}, //<--- for example share this

    };
  },
  methods: {}
};
</script>

【问题讨论】：

使用道具比使用事件总线更难。寻找 Vuex。使用 Vuex，您可以以简单、标准化的方式共享数据。

标签： vue.js vuejs2 vue-component

【解决方案1】：

https://alligator.io/vuejs/component-communication/

您需要对组件之间的通信进行一些研究。

有很多方法可以做到这一点；）

【讨论】：

【解决方案2】：

如果你想将数据从父母分享给孩子，你可以这样做：

在组件 A 上

<fileForm :something="user"></fileForm>

在组件 B 中

props: {
  something: Object
}

如果你想将数据从孩子分享给父母，你必须使用事件总线或 vuex：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

【讨论】：