vue.js - Vuejs通过同一个组件传递数据

Question

我是 vuejs 的菜鸟，我想传递一些数据：profile你可以在里面created()找到

    <span v-if="isLoggedIn">{{this.profile.username}}</span>

我知道我缺少 vue 工作原理的一些基础知识，但我仍在学习:)

<template>
  <v-card class="mx-auto" color="dark" dark>
    <div>
      <v-app-bar clipped-left dark app>
        <v-app-bar-nav-icon class="grey--text" @click="drawer= !drawer"></v-app-bar-nav-icon>

        <v-toolbar-title class="grey--text">
          <span class="font-weight-light">anime</span>
          <span>Art</span>
        </v-toolbar-title>

        <v-spacer></v-spacer>

        <span v-if="isLoggedIn">hi{{profile.username}}</span>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon to="/login">
          <v-icon>mdi-account-outline</v-icon>
        </v-btn>

        <v-btn icon v-if="isLoggedIn">
          <v-icon v-on:click="logout">mdi-logout-variant</v-icon>
        </v-btn>
      </v-app-bar>
    </div>
    <v-navigation-drawer app expand-on-hover clipped v-model="drawer">
      <v-divider></v-divider>

      <v-list nav>
        <v-list-item v-for="item in items" :key="item.title" :to="item.path" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-card>
</template>

<script>
import firebase from "firebase";
// import db from "@/Firebase/firebaseInit";

export default {
  data() {
    return {
      profile: {},
      name: "navbar",
      isLoggedIn: false,
      currentUser: false,
      drawer: false,
      items: [
        { title: "Anime Home", icon: "mdi-view-dashboard", path: "/" },
        {
          title: "Trends",
          icon: "mdi-chart-line-stacked",
          path: "/trends"
        },
        { title: "Save", icon: "mdi-bookmark", path: "/save" },
        {
          title: "Profile",
          icon: "mdi-badge-account-horizontal",
          path: "/profile"
        },
        { title: "About", icon: "mdi-label", path: "/about" }
      ],
      right: null
    };
  },
  created() {
    this.profile = {username:'hello'}
    var user = firebase.auth().currentUser;
    // var name, email,uid;
    //, photoUrl, emailVerified

    if (user != null) {
      this.isLoggedIn = true;
      this.profile = {
        username: user.displayName,
        useremail: user.email,
        userid: user.uid,
        photoUrl: user.photoURL,
        emailVerified: user.emailVerified
      };
      console.log(profile.username);

      // The user's ID, unique to the Firebase project. Do NOT use
      // this value to authenticate with your backend server, if
      // you have one. Use User.getToken() instead.
    }
    // console.log(user)
  },
  methods: {
    logout: function() {
      firebase
        .auth()
        .signOut()
        .then(function() {
          // Sign-out successful.
          if (!firebase.auth().currentUser) {
            alert("Signed out successfuly ");
          }
        })
        .catch(function(error) {
          // An error happened.
          alert(error.message);
        });
      this.isLoggedIn = false;
      this.$router.go({ path: this.$router.path });
    }
  }
};
</script>

标签： vue.js

Answer 1

在您的 html 中：

<span v-if="isLoggedIn">{{profile.username}}</span>

在你的脚本中

<script>
import firebase from "firebase";

export default {
  data() {
    return {
      profile: {},
      //all your stuff
  },
  created() {
    var user = firebase.auth().currentUser;

    if (user != null) {
      this.isLoggedIn = true; 
      this.profile = {
        username:user.displayName,
        useremail :user.email,
        userid:user.uid,
        photoUrl : user.photoURL,
        emailVerified: user.emailVerified
      }      
    }
    // console.log(user)
  },
  methods: {//all your stuff  }
};
</script>