In this communication method, Vue.js instance can emit events from one component and another component can listen it.
This is very useful when you develop large Vue application because there are lot of components at different level. So when you change the data on one component other components should be notified
Files needed in this examaple
main.js
App.js
CompA.vue
CompB.vue
When I click the button on CompA incremented value will be shown in CompB
Add this line of code to main.js
Vue.prototype.$eventHub = new Vue();
First you create these functions in CompB because you are going to listen the events emited from CompA
|
1 2 3 4 5 6 7 |
created() { this.$root.$on('change-name', this.changeName) }, beforeDestroy() { this.$root.$off('change-name'); }, |
In the method section of the CompA you can add the following code
changeName(name) {
// name will be automatically transported to the parameter.
this.name = name;
},
Then you can fire the events from CompB
this.$root.$emit(‘change-name’,”Mike Tyson”);
1,330 total views, 3 views today