0

I have a Vue 3 app. I'm using the Composition API as I've read it simplifies state management. As a result, I'm trying to to avoid using VueX. Perhaps, I've run into a scenario that warrants it. I currently have the following component structure in my app...

App

+---------------------------------------------------+
|                                                   |
| +-----------------+    +--------------------+     |
| | Component 1     |    | Component 2        |     |
| | +-------------+ |    |                    |     |
| | | Component A | |    +--------------------+     |
| | +-------------+ |                               |
| |                 |                               |
| | +-------------+ |                               |
| | | Component B | |                               |
| | +-------------+ |                               |
| +-----------------+                               |
|                                                   |
+---------------------------------------------------+

This whole app revolves around setting properties of a single item. The item can be initially set via Component 1 or in Component B. You can set properties on the item via Component A. When a user clicks a button in Component 2, I want to force a method in Component A to run. However, I haven't figured out how to do that.

Currently, in Component 2 I use this.$emit('forceRefresh') when the button is clicked. However, $emit only let's me go up the stack. I'm not sure how to go down the stack once I've reached the top. I tried using a computed property in Component A however, that didn't work. I feel stuck, like I'm doing this wrong. Still, I know there's a way, I'm just unsure of what that way is.

Dev
  • 181
  • 1
  • 13
  • if you want to use event bus please check my answer here https://stackoverflow.com/questions/63471824/vue-js-3-event-bus/64019074#64019074 – Boussadjra Brahim May 18 '21 at 20:09
  • maybe try using provide-inject https://blog.logrocket.com/provide-inject-vue-js-3-composition-api/ <-- here is a paragraph on how to make it reactive – Maciek Celiński May 19 '21 at 09:35

1 Answers1

-1

You can use Vue.js event bus. Essentially, an event bus is a Vue.js instance that can emit events in one component, and then listen and react to the emitted event in another component directly — without the help of a parent component.

Here is reference link that can help you . 1https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/

export const bus = new Vue(); //in main.js

import { bus } from '../main'; //in component "B" and in click call the method and insted of emitting do
bus.$emit('changeIt', 'forceRefresh');

in component "A" in Mounted() add also import{ bus } 
bus.$on('changeIt', (data) => {
  //do the component refresh
})
Diptyajit Mitra
  • 94
  • 2
  • While the event bus approach is interesting, the problem is, the `$on` method was removed from Vue 3. I know it was in Vue 2. However, I do not see it in the Vue 3 docs. – Dev May 18 '21 at 20:07
  • Use the following library mitt - https://github.com/developit/mitt Just make a small change `import mitt from 'mitt';` `const bus = mitt(); ` `bus.emit` and `bus.on` – Diptyajit Mitra May 18 '21 at 20:35