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的新手并尝试了一些建议的答案，例如使用＆＃34; ref＆＃34; <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/>"
});

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。

将数据传递给VueJS中的组件

1 个答案: