javascript - 将数据传递给 VueJS 中的组件

Question

我正在使用 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> - 不幸的是，它们都不适合我)

Answer 1

长期的解决方案是 Vuex。

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

例子:

// probably main.js file
new Vue({
  el: "#app",
  data: {user: null}, // added this
  components: { App },
  template: "<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。