Question

我想将数据从一个组件提供给另一个组件。因此，在更新数据时，第一个组件应发出BusEvent。调用了更新的函数，但是在控制台中总是出现错误：更新的钩子中出现错误：“ TypeError：无法读取未定义的属性'$ emit'”

其他组件也不接收高度/宽度。而且我在这里遇到相同的错误：TypeError：无法读取未定义的属性'$ emit'。

我刚刚开始学习vue，但我不明白怎么了。非常感谢您的帮助！

高度和宽度在组件一中初始化，所以这不是问题。

//Definition of EventBus in main.js file
export const EventBus = new Vue(); 

//First Component
import EventBus from '@/main.js'
export default {
  data: function () {
    return {    
      height: '',
      width: ''
    }
  },

  updated() {
    EventBus.$emit('emited', this.height, this.width);
  }
}


//Second Component
import EventBus from '@/main.js'
export default {
  data: function () {
    return {
      height: '',
      width: ''
    }
  },

  mounted() {
    const self = this
    EventBus.$on('emited', function (height, width) {
      alert('WORKS!')
      self.height = height
      self.width = width
    })
  }
}

Answer 1

EventBus应该像这样import { EventBus } from '@/main.js'
如果要通过$emit传递多个值，则应使用object。

替换

EventBus.$emit('emited', this.height, this.width);

使用

EventBus.$emit('emited', {height: this.height, width: this.width});

然后是听众：

EventBus.$on('emited', function ({height, width}) ...

错误：无法读取未定义的属性（Vue）

1 个答案: