将数据传递给 VueJS 中的组件答案

【问题标题】：Pass data to component in VueJS将数据传递给 VueJS 中的组件
【发布时间】：2018-09-12 02:50:50
【问题描述】：

我正在使用 VueJS，我需要将 Firebase 身份验证用户数据 (JSON) 从组件 App.vue 传递到另一个名为 Details.vue 的组件以显示该登录用户的名称。

App.vue:

export default {
    name: 'app',
    beforeCreate: function () {
      Firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.user = user
// user is logged in now -> pass data to App.vue component here
[...]

有什么好的方法可以做到这一点？（我是 VueJS 的新手，尝试了几个建议的答案，比如使用“ref”<add ref="details"></add> - 不幸的是，它们都不适合我）

【问题讨论】：

如果您指定不适合您的方式和内容，将会很有帮助。如果它是子组件，首先要尝试将props 属性用于您要向其传递数据的组件。更多信息请访问vuejs.org/v2/guide/…。如果没有更详细地描述您的问题
如果您的项目足够大，我建议您查看Vuex。它可以充当您的商店并管理您的用户状态，因此您无需使用道具将其传递给每个组件。存储 userState 后，您可以使用 getter 快速检索该值。您还可以在商店中存储与用户有关的其他信息，以便快速检索。

标签： javascript vue.js firebase-authentication vue-component

【解决方案1】：

长期的解决方案是 Vuex。

如果用户是您想要拥有的唯一全局属性，您可以在根目录创建一个数据属性并使用this.$root.propName 从任何组件访问。

例子：

// probably main.js file
new Vue({
  el: "#app",
  data: {user: null}, // added this
  components: { App },
  template: "<App/>"
});

App.js：

export default {
    name: 'app',
    beforeCreate: function () {
      Firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.$root.user = user; // set to this.$root.user instead of this.user

在任何其他组件中：

export default {
    name: 'something',
    methods: {
      printUser() { console.log(this.$root.user); }
    },
    // ...

这是一个快速的解决方案。不要滥用$root 数据。拥有user 就像拥有一个全局变量。使用它的代码越多，调试就越困难。 Vuex 通过将所有更改集中在突变中来处理这个问题。总结一下：如果你发现自己需要更多 $root 属性，请直接使用 Vuex。

【讨论】：

非常感谢，终于成功了。 Don't abuse the $root data. Having user is like having a global variable. The more code uses it, the harder it becomes to debug 就像我从多个组件中更改 user 的值，或者是什么让它变得更难？
不只是改变user。我的意思是如果你在那里添加许多其他变量。然后许多其他地方可能会同时更改这些变量，可能是异步的。此时，假设您想在更改变量时进行调试，例如，没有一个特定的点可以添加断点。无论如何，一个变量是可以的。如果你发现自己使用这个$root 太多，请记住 Vuex。