Question

感谢您在两个Vue单页组件方面的帮助。

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

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

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

，并应通过EventBus转移到“ ResultList”：

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

“ ResultList”中的

是一种侦听器方法，应该将对象存储在组件的data-Object中：

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

不幸的是，“ ResultList”的userInput-object内部没有任何更改。其属性userName和taskNr保留为空字符串。

任何想法我都会很高兴。预先感谢！

更新

这是在“搜索栏”组件中调用“ 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
  })
}

Vue EventBus不会传输对象属性

1 个答案: