Question

将用户名从login.vue组件传递给navbar.vue组件，但此代码未在导航栏中显示用户名。并给了我这个错误属性或方法＆＃34;用户名＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

在

中找到

login.vue

<script>
 import axios from 'axios';
    export default {
    name: 'login',
    data() {
       return {
        email: '',
        password: '',
        logged : false,
        username : '',
        errorMsg : '',
     }
    },
   methods: {
     signIn: function () {
       axios.post('url', {
       email: this.email,
       password: this.password,
      },
   {
    headers: {

    }
  }
  )
  .then(response => {
    if(response.status == 200){
      setTimeout(function(){window.location.replace('url');
      }, 1500);
      this.logged = true;
      this.username = response.data.user.full_name;
      console.log(this.username);
    }
  })
  .catch(error => {
    this.errorMsg = '** Incorrect username or passrord **';
  });
}

navbar.vue，显示login.vue的全名

<script>
  import login from './Login'
  export default {
    name: 'NavBar',
    data() {
      return {
      username : username,
      }
    },
   components: {
    login
   },
 }
</script>

Answer 1

Vue事件总线可以帮助您解决这种情况。 1.在您的event-bus.js文件中创建一个事件总线，如

which node

在login.vue中登录成功时创建一个事件。喜欢

import Vue from 'vue';
export const EventBus = new Vue();

在navbar.vue中接收事件

import { EventBus } from './event-bus.js'

EventBus.$on('login', user => {

  console.log(user)
});

在谷歌搜索Vue eventBus，有几个关于此的教程。

您可以使用vuex制作身份验证系统。

将数据从组件传递到另一个组件vue.js

1 个答案: