Vue EventBus 不会传输对象属性答案

【问题标题】：Vue EventBus won't transfer object attributesVue EventBus 不会传输对象属性
【发布时间】：2018-08-24 11:23:32
【问题描述】：

感谢您对两个 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' 的 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: ''
  } 
}

【问题讨论】：

标签： javascript vue.js event-bus element-ui

【解决方案1】：

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

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

【讨论】：

谢谢你，为我完成了这项工作！