Emitting data via EventBus - vue.js

Question

I would like to emit some data from one component to the other (children components).
In my main.js I created: export const Bus = new Vue({}).
Then in my first child component ,I've got an input with v-model and I would like to pass that v-model.
<template>
<div>
<input type="text" v-model="message" />
<button type="button" #click="submit">Submit</button>
</div>
</template>
<script>
import { Bus } from './../main.js';
export default {
data () {
return {
message: ''
}
},
methods: {
submit() {
if(this.message !== ''){
this.$router.push('location');
Bus.$emit('name', this.message);
}
}
}
}
</script>
My second component:
import { Bus } from './../main.js';
export default {
data() {
return {
recievedMessage: ''
}
},
created() {
Bus.$on('name', (message) => {
this.recievedMessage = message;
})
}
}
Then I try to display passed data: {{ recievedMessage }}, but unfortunately it doesn't work.

Answer 1

Assuming you set up a global EventHub in your main.js, the second component isn't listening because it has not been initialized in the whole Vuejs life-cycle.
However, if you intended on your child component being rendered within the parent then you will need to import the component into the parent.
Parent Component
<template>
<div>
<input type="text" v-model="message" />
<button type="button" #click="submit">Submit</button>
<child-component />
</div>
</template>
<script>
import ChildComponent from '#/components/ChildComponent'
import { Bus } from './../main.js';
export default {
components:{
ChildComponent
}
data () {
return {
message: ''
}
},
methods: {
submit() {
if(this.message !== ''){
this.$router.push('location');
Bus.$emit('name', this.message);
}
}
}
}
</script>
UPDATED
Child Component
<template>
<div>{{recievedMessage}}</div>
</template>
<script>
import { Bus } from './../main.js';
export default {
data() {
return {
recievedMessage: ''
}
},
created() {
Bus.$on('name', this.eventHandlerMethod)
},
methods: {
eventHandlerMethod (message) {
this.recievedMessage = message;
}
}
}
</script>
The listener is calling "eventHandlerMethod" which update the data instance.