Vue.js 将对象传递给其他组件

Question

您好，我有一个登录页面，我想用从 API 获得的响应填写我的帐户，然后在我的标题和其他地方使用它。我在我的 app.vue 中呈现了我的标题。我如何访问填充对象的帐户

这是我的代码。

    <template>
    <div class="rating-login-view">
    <div class="rating-login-view__form">
      <span></span>
      <form class="login-form">
        <h1 class="login-form__greeting">Velkommen til <span class="break large">Lorem Ipsum</span></h1>
        <label class="login-form__username" for="username">
          <span>Brugernavn</span>
          <input class="input-username" id="username" type="text" name="username" v-model="username" placeholder="Butik">
        </label>
        <label class="login-form__password" for="password">
          <span>Kodeord</span>
          <input class="input-password" id="password" type="password" v-model="password" name="password" placeholder="*********">
        </label>
        <input class="login-form__submit" type="submit" v-on:click.prevent="login()" value="Log in">
      </form>
      <p class="customer-help">Brug for hjælp? Ring +45 50 500 500</p>
    </div>
    <div class="rating-login-view__image">
      <span class="organisation">
        <img class="organisation-logo" src="http://via.placeholder.com/150x150" alt="">
      </span>
    </div>
  </div>
</template>

    <script>
    import axios from 'axios'
    import {Account} from './js/account.js'

    export default {
      name: 'login',
      data () {
        return {
          username: '',
          password: '',
          account: ''
        }
      },
      methods: {
        login () {
          axios.post('MYAPI', {
            username: this.username,
            password: this.password
           }).then(response => {
             console.log(this.username)
        console.log(this.password)
        console.log(response)
        if (!response.data.Error) {
          if (response.data.status.type === 0 || response.data.status.type === 1) {
            this.$session.start()
            this.account = response.data
            Account.$emit('account fill', this.account)
            // this.$session.set('jwt', response.body.token)     // gives a key and a value to the session
            // Vue.http.headers.common['Authorization'] = 'Bearer ' + response.body.token   // security
            // this.$router.push('/dashboard')

            console.log(this.account)
          }
        } else {
          alert('something went wrong')
        }
      })
    }
  }
        }
        </script>

      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style>

我想在此组件之外的其他地方使用已填写的帐户

Answer 1

在母版页中创建一个对象变量obj1（您可以在 head 部分的顶部创建此变量，以便在任何脚本运行之前可用）。您可以从所需的任何组件访问此变量。假设您要存储组件中的对象 obj2。在你的组件存储中 obj2 像这样 --

obj1.obj2 = obj2;

您可以从任何其他组件使用 obj1.obj2

访问它