How to organize the interaction of non-hierarchically connected components in vue2?

Question

JavaScript

Hello everyone, please be as simple as possible.
How to organize interaction in a view of two components (files .vue)
1. Interaction parent - child is vague but I can imagine. BUT
2. What to do if there is no submission? How to make two components interact?
For example:
I have an App.vue that is the parent of all components included in it.
It includes three more components: StepOne.vue StepTwo.vue StepThree.vue
These components contain:
1. A list with a choice of values
​​2. Range sliders
3. Checkboxes
QUESTION ONE:
How can I make these components appear only after the user interacts with them in the last step? (ie 2 appears after the user has selected a value on the first one, etc.)
QUESTION TWO:
How do I pass values ​​from one component to another? (let's say my slider values ​​depend on the value selected in the first step). Google and the documentation prompts to look towards BUS but I do not quite understand.

Answer 1

In the case of not hierarchically related (not having a common parent, for example), you can use:
1) Common store (vuex)
2) Event Bus
In the case of single-file event bus components, this is just a js file with the content:

import Vue from 'vue';
export const EventBus = new Vue();

For example, there are two components: a product card (somewhere in the middle of the page) and a shopping cart (somewhere in the header):
1) In both components, we import bus 2) In the card component, in a method call, for example, addToCart:

methods: {
  addToCart: function() {
    	EventBus.$emit('add-to-cart', 1);
  }
}

3) In the cart:

EventBus.$on("add-to-cart", count => {
  console.log(`Cart updated on ${count} items.`)
})

In the case of the hierarchy you've given:

<App>
  <StepOne></StepOne>
  <StepTwo v-if="isListItemSelected"></StepTwo>
  <StepThree v-if="isRangeShowing"></StepThree>
</App>

You can put the parameters isListItemSelected (the value is selected from the list), isRangeShowing (the slider is shown) into the data of the App component with false default values ​​(regarding StepOne, it is not clear from the question whether it was shown initially). In the StepOne component , as soon as the user selects a value, you can do $emit (without event-bus, because there is a parent-child relationship), in App , catch the event through $on and change the value, in the case of StepOne - isListItemSelected = true. It's the same with the rest.
If you need to change something when moving the sliders - then when you do $emit with them from the component and change some values ​​in the parent App - you can send them through props to the next component:

<StepThree v-if="isRangeShowing" :range="rangeValues"></StepThree>

and don't forget to specify props: ['range'] in StepThree .

Answer 2

Vuex