Passing an event between sibling components

Question

I have a Parent component that hosts 2 children. Child A (FileLoader) is a file uploader component. When he successfully uploads something, I want to send an event to Child B (FileViewer) that a file upload succeeded.

I'm new to Vue3 and Vue in general. What is the correct / simple way to send the event info in this way?

In Child A, I already have

this.$emit('new-file-loaded');

but, I'm not sure what to do in my parent. Currently, the parent just holds the 2 components:


<div class="row">
  <div class="col">
    <FileLoader/>
  </div>
</div>
<div class="row">
  <div class="col">
    <FileViewer  />
  </div>
</div>

I think in my parent, I want somethign like

<FileTable @new-file-uploaded="....something..."/>, but I'm not quite sure if that's the right approach.

Does this answer your question? [Communication between sibling components in Vue.js 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vue-js-2-0) — bassxzero, Nov 08 '21 at 23:10
Possibly. I'm not sure if the same paradigms should be used in Vue 3 — Stealth Rabbi, Nov 08 '21 at 23:36
I don't think any of the changes in vue 3 provided a different way to handle this situation. I could be wrong though. — bassxzero, Nov 08 '21 at 23:42

score 0 · Answer 1 · answered Nov 09 '21 at 04:51

You can have the state of whether the file is loaded or not stored in the parent component. The parent component can update a prop in the sibling component that needs that information when the file upload is complete.

So you can have something like this:

<div class="row">
  <div class="col">
    <FileLoader @new-file-uploaded="updateFileIsLoaded"/>
  </div>
</div>
<div class="row">
  <div class="col">
    <FileViewer :fileIsLoaded=fileIsLoaded/>
  </div>
</div>

Then in the parent component:

data() {
  return { 
    fileIsLoaded: false
  }
},
methods: {
  updateFileIsLoaded() {
    this.fileIsLoaded = true
  }
}

When the fileIsLoaded variable changes in the parent component, it will cause the FileViewer component to re-render because its prop changed.

Passing an event between sibling components

1 Answers1