Passing data between Vue siblings

Question

After researching this question thoroughly and after implementing the Bus method to communicate between siblings, I am getting a webpack error, so either i'm not implementing right (using latest CLI as of yesterday), or I need some other method.

I am new to Vue, coming from React and I have built a simple app wrapping 2 components in app.vue:

an input that sends data:

<GoogleInput @searchEvent="getSearchLocation($event)"></GoogleInput>

and a map container that should receive the data:

<GoogleMapsContainer :location="location" name="location-project"></GoogleMapsContainer>

I successfully implemented child (GoogleInput) to parent communication in app.js via:

getSearchLocation(input) {
  this.location = input;
}

with a method in GoogleInput:

this.$emit('searchEvent', ev.target.value);

Up to here everything was smooth.

---

Yet when trying to communicate my input value through to sibling (GoogleMapsContainer) via the bus method:

In my entry index.js: const Bus = new Vue({});

A new emit in my sending component:

Bus.$emit('passLocation', {location: this.location})

and in my receiving component:

Bus.$on('passLocation', (input) => { this.location = input; });

I get a webpack error:

Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.$on is not a function"

I am looking for "the shortest distance" to communicate my input to map container, without going into solving webpack issues (if this is a webpack issue at all, or just a fat finger mistake).

BTW: If vuex isn't a time consuming method to implement (as React-Redux is) in here, that would be a cool route as well, but I must keep this design (already in Git)

Thanks

Answer 1

You probably have some import errors.

In your index.js, export it like:

export const Bus = new Vue({});

And in the files you do Bus.$emit(...) or Bus.$on(...) import it like:

import { Bus } from './index'; // make sure you use the correct relative path