Dynamic component event bus not work in vue? - vue.js

Question

I just used event bus in vuejs for the dynamic component, but when I emit an event from one component, I cannot listen to that event in another component. Below is the demo I created by codesandbox, what I want to do is output 'test in tes2' from test2component, but it outputs nothing. But when I uncomment the $bus listener in HomeCompnent, the two console.log are all executed.
main.js
Vue.propotype.$bus = new Vue();
HomeComponent
<template>
<div>
<component :is="currentComponent" #changeComponent="changeComponent"></component>
</div>
</template>
<script>
import Test1Component from "./Test1Component";
import Test2Component from "./Test2Component";
export default {
created() {
// this.$bus.$on("test", () => console.log("event bus test"));
},
components: {
Test1Component,
Test2Component
},
data() {
return {
currentComponent: "Test1Component"
};
},
methods: {
changeComponent() {
this.currentComponent = "Test2Component";
}
}
};
</script>
<style>
</style>
Test1Component
<template>
<div>
<h1>test1</h1>
<button #click="changeComponent">click me</button>
</div>
</template>
<script>
export default {
methods: {
changeComponent() {
this.$emit("changeComponent");
this.$bus.$emit("test");
}
}
};
</script>
<style>
</style>
Test2Component
<template>
<h1>test2</h1>
</template>
<script>
export default {
created() {
this.$bus.$on("test", () => console.log("test in test2"));
}
};
</script>
<style>
</style>

Answer 1

This problem is a good demonstration of the downsides of the event bus pattern:
You, the developer, have to carefully ensure that sender and receiver of all events actually exist at the same moment in time.
In your scenario, that's not the case:
When Test1Component emits the event, Test2Component doesn't exist yet.
After Test2Component has been created by HomeComponent just a moment later, the event is already "gone".
My usual disclaimer as a Vue core team member: Don't use the Event bus pattern.

Answer 2

Event Bus is just fine but problem is in implementation.
You are very correct in case of you un-comment code In home component, I tested on your snippet it emit only once event bus test [console.log]
With events you need to take care this
You need to define listener. [ make sure you define them before emitting event ]
Now you just emit event. [ to work we need listener to listen first]
In your case you wrote listener function $on in created event of theTest2Component
Now just think for now, You don't have any listeners at beginning as in home compo you just commented that listener code .[ its initial step ]
Now when you click on click me button you are changing component to new component[Test2Component], It is mounted and its created event will fire then this listener will start listening to event
but you missed this
this.$emit("changeComponent"); // this is first [ fires/emit ]
this.$bus.$emit("test"); // THEN THIS EMIT
So, When it just start changing component from compo1 tocompo2testfired/emitted directly without wait, its notsynchronousit isAsynchronousIt will not wait to finish all stuff ofchangeComponent. It will be emitted immediately [test`]
Guess what Now when test emits, at that time Dom operation to add component, ITS NOT DONE YET, and test is emitted
So, No listeners are there, so no console.log
But if you see if, you UNCOMMENT listener in home function listener is well defined before emit of test event so it output in console.
I hope you understand it, if not let me know point I will explain it in details
Another thins is that you added $bus in prototype so all components has its own bus. instead you can use GLOBAL event Bus
as in example you can see.
in es6 you can do
//bus.js
const bus = new Vue({});
export default bus;
to import it in other components
import bus from './bus.js';
// ... do bus.$on ..
// ... do bus.$emit ..
var $bus = new Vue({});
Vue.component('Test1', {
template: `
<div class="blog-post">
<h3>test1</h3>
<button #click="changeComponent">click me</button>
</div>
`,
methods: {
changeComponent() {
$bus.$emit("chng");
$bus.$emit("test");
}
}
});
Vue.component('Test2', {
template: `
<div class="blog-post">
<h3>test2</h3>
</div>
`,
created() {
$bus.$on("test", () => console.log("test in test2 will not fire as we are little late to listen it"));
}
});
new Vue({
el: '#app',
created: function(){
console.log('created');
$bus.$on("chng", () => this.changeComponent());
$bus.$on("test", () => console.log("test in test2 main/HOME"));
},
data() {
return {
currentComponent: "Test1"
};
},
methods: {
changeComponent() {
this.currentComponent = "Test2";
}
}
});
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Stack Overflow - Hardik Satasiya</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<component :is="currentComponent" #changeComponent="changeComponent"></component>
</div>
</body>
</html>

Answer 3

Your test is not correct.
Basically, Test2Component is not created in the time Test1Component emit this.$bus.$emit("test");
You saw 2 console.log because codesandbox use hot reload modules, so this.$bus.$on("test", () => console.log("test in test2")); is still registered if when you change your code.
If you unregister when component destroyed in Test2Component, test in test2 will never be logged
Test2Component.vue
<template>
<div>
<h1>test2</h1>
<button #click="changeComponent">click me</button>
</div>
</template>
<script>
export default {
created() {
console.log("Component 2 is created");
this.$bus.$on("test", this.testLog);
},
beforeDestroy() {
this.$bus.$off("test", this.testLog);
},
methods: {
testLog() {
console.log("test in test2");
},
changeComponent() {
this.$emit("changeComponent");
}
}
};
</script>
<style>
</style>
Demo: https://codesandbox.io/s/2485jw460y
If you comment
beforeDestroy() {
this.$bus.$off("test", this.testLog);
},
in component 2, you will see test in test2 is printed many times after few clicks
(if you change the code, please refresh to run from beginning)