javascript - Vue EventBus 不会传输对象属性

Question

感谢您对两个 Vue 单页组件的帮助。

组件“搜索栏”包含一个用于用户输入的对话框。组件“ResultList”中需要这些用户输入以供进一步使用。因此我想使用 Vue EventBus 进行传输。

用户输入是一个具有两个属性的对象：

userInput: {
    userName: '',
    taskNr: ''
  },

并应通过 EventBus 传输到“ResultList”：

emitUserInput: function () {
  EventBus.$emit('emitUserInput', this.userInput)
}

在“ResultList”中是一个侦听器方法，应该将对象存储在组件数据对象中：

userInputListener: function () {
  EventBus.$on('emitUserInput', setUser => {
    this.userInput.userName = $userInput.userName
    this.userInput.taskNr = $userInput.taskNr
  })
}

不幸的是，“ResultList”的用户输入对象内部没有变化。它的属性 userName 和 taskNr 保持为空字符串。

我会很高兴有任何想法。提前致谢！

更新

这是在“Searchbar”组件中调用“emitUserInput()”的代码

<el-form-item>
      <el-button @click='emitUserInput(), toggleInputForm = false'>Bestätigen</el-button>
</el-form-item>

这是“搜索栏”组件中的数据对象：

data () {
  return {
    userInput: {
      userName: '',
      taskNr: ''
  } 
}

Answer 1

你在哪里打电话userInputListener？你实际上可以放入EventBus.$on你的mounted()钩子，看看它是否有效：

mounted() {
  EventBus.$on('emitUserInput', payload => {
    this.userInput.userName = payload.userName
    this.userInput.taskNr = payload.taskNr
  })
}