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

Question

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

在发现

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 **';
  });
}

显示来自login.vue的全名的navbar.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();

2. 在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); } }) 

3. 在navbar.vue中接收事件

     从“ ./event-bus.js”导入{EventBus}\n\n EventBus。$ on（'login'，user => {\n\n   console.log（用户）\n }）;\n

在Google中搜索有关Vue eventBus的信息，这里有一些教程。

您可以使用vuex进行身份验证系统。