Question

我有两个组件，分别是componentA和componentB。在componentA中，我有一个click事件，触发一个将用户对象作为参数传递的方法，然后使用事件总线发出该对象。当我成功地侦听了componentB中的emission之后，我已经将被发射的对象分配给了一个变量，我console.log退出显示该对象的变量，但是当我再次console.log到Event之外的变量时。对象不见了。任何帮助，将不胜感激：）谢谢！

这是我的代码：

componentA

showUserStats(user) {
    EventBus.$emit('userInfo', user);
    this.$router.push({
      name: 'componentB',
      params: { id: user._id }
    })
  }

componentB

created() {
      EventBus.$once('userInfo', (user) => {
        this.userInfo = user
        console.log('userInfo', this.userInfo);
      });
      console.log('userInfo outside EventBus', this.userInfo);
    }

Here is the image of the output

Answer 1

之所以发生这种情况，是因为您正在控制台上登录created生命周期事件。在$once调用之外的控制台日志在创建组件时立即调用（未分配用户信息时），但是$once内的console.log仅在发出事件和进入事件时才发生。打开变量/分配数据。

与注释保持一致：您不能仅仅因为预期的事件触发而延迟并希望它能正常工作。您尚未向我们提供有关何时调用showUserStats的信息，所以我不知道此事件何时发出。

关于计算值，它应该工作，因为它会在分配用户信息时更新，但是您需要添加一个检查值，就像这样：

computed: {
  fullName () {
    return this.userInfo ? this.userInfo.name + ' ' + this.userInfo.surname : ''
  }
}

除非分配了用户信息对象，否则它将显示空白（注意：您可能需要根据初始化数据（）中的userInfo var的方式来更改检查内容）

在其他组件中侦听后，无法识别通过发出的Vue对象

1 个答案: