javascript - Vue.js/Laravel: How to pass data between multiple components

Question

require('./bootstrap');

window.Vue = require('vue');

Vue.component('exampleComponent1', require('./components/exampleComponent1.vue'));
Vue.component('exampleComponent2', require('./components/exampleComponent2.vue'));

const app = new Vue({
    el: '#app'
});

from the above code, I want to pass data from exampleComponent1 to exampleComponent2 when some event has occurred in exampleComponent1.

What is the optimal solution for this ??

Answer 1

You can use a Event Bus for this.

// in some global file
const EventBus = new Vue();

// creating or emitting event
EventBus.$emit('someEvent', 'some-data')

// listen to the event
EventBus.$on('someEvent', function(data) {
  console.log(data) // 'some-data
})