I want to give data from one component to another. Therefore the first component should emit the BusEvent when Data is updated. The updated function is called, but I always get an Error in my console: Error in updated hook: "TypeError: Cannot read property '$emit' of undefined"
The other component also doesn´t receive height/width. And I get the same error here: TypeError: Cannot read property '$emit' of undefined.
I just started learning vue and I don't understand whats wrong. Thanks a lot for your help!
height and width are getting initialized in component one, so that can't be the problem.
//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
})
}
}
import { EventBus } from '@/main.js'then