计算道具返回未定义

Question

我在组件中有一个道具，我想将其与eventHub一起传递给一个想要显示道具的同级组件。但是，我无法使其正常工作，并且始终返回未定义。

   <div class="user-menu">
           {{getUsername != undefined ? 'Logged in as ' + getUsername + '!' : 'Not logged in'}}
   </div>

    computed: {
        getUsername(){
            var getUser;
        this.$eventHub.$on('current-user', username => {
             getUser = username
           })
        return getUser;
        }
    }

Answer 1

computed属性不是此处工作的正确工具。您只需要一个data属性：

data () {
  return {
    getUsername: null
  }
},

created () {
  this.$eventHub.$on('current-user', username => {
    this.getUsername = username
  })
}

根据事件中心的创建方式，您可能还需要在销毁组件时删除事件侦听器。