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

Question

将用户名从 login.vue 组件传递到 navbar.vue 组件，但此代码未在导航栏中显示用户名。并给我这个错误 属性或方法“用户名”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

发现于

登录.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 文件中创建一个事件总线，比如

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

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

   import { EventBus } from './event-bus.js'
   
   then(response => {
   
       if(response.status == 200){
         setTimeout(function(){window.location.replace('url');
         }, 1500);
         this.logged = true;
         this.username = response.data.user.full_name;
         EventBus.$emit('login', this.username);
         console.log(this.username);
   
       } })
   

2. 在你的 navbar.vue 中接收事件

   从 './event-bus.js' 导入 { EventBus }
   
   EventBus.$on('登录', user => {
   
     控制台日志（用户）
   });
   

在 google 上搜索 Vue eventBus 有几个关于这个的教程。

你可以使用 vuex 来制作认证系统。