Vue.js : howto trigger method from one component to another

Question

Vue.js Version 2.6.11 incorporated into asp.net core mvc views.

Imagine the following scenario. A page has 2 components on it.

<v-masterlist v-bind:dummy-prop="dummyProp"> </v-masterlist>
<v-detail v-bind:itemid="itemId"></v-detail>

The masterlist retrieves a list of items from on api upon creating. When an item gets selected, the component emits an event captured by the page. That updates itemId, triggering the detail component to retrieve the full record from the api.

In the detail component, users can update or delete that record. Those action should trigger masterlist to again retrieve the updated list of items from the api.

I set this now up by having a dummy prop on masterlist. Whenever that property changes, the list is retrieved from the api.

Upon update/delete in the detail component an event is emitted explaining what action (update/delete) was performed. That event is captured in the page, setting dummyProp to a new random value, hence triggering masterlist to update itself.

It works fine, but seems messy. It would be better if masterlist would be capturing events emitted by detail. Is that possible? Or any other suggestions?

Answer 1

At the end we started using this emitter component, works fine. https://github.com/developit/mitt