В случае не связанных иерархически (не имеющих общего родителя, например), можно использовать:
1) Общий стор (vuex)
2) Event Bus
В случа однофайловых компонентов event bus это просто js-файл с содержимым:
import Vue from 'vue';
export const EventBus = new Vue();
Например есть два компонента: карточка товара (где-то в середине страницы) и корзина (где-то в шапке):
1) В обоих компонентах импортируем bus
import { EventBus } from './event-bus.js';
2) В компоненте карточки в вызове метода, например, addToCart:
methods: {
addToCart: function() {
EventBus.$emit('add-to-cart', 1);
}
}
3) В корзине:
EventBus.$on("add-to-cart", count => {
console.log(`Cart updated on ${count} items.`)
})
Как сделать так, чтобы эти компоненты появлялись только после взаимодействия с ними пользователя на прошлом шаге? (т.е 2 появляется после того как пользователь выбрал значение на первом и тд..)
В случае приведенной вами иерархии:
<App>
<StepOne></StepOne>
<StepTwo v-if="isListItemSelected"></StepTwo>
<StepThree v-if="isRangeShowing"></StepThree>
</App>
Можно вынести в data компонента
App параметры
isListItemSelected (значение выбрано из списка),
isRangeShowing (показан ползунок) со значениями false по умолчанию (по поводу StepOne - непонятно из вопроса показан ли он изначально).
В компоненте
StepOne, как только пользователь выберет значение, можно делать
$emit (без event-bus, потому что есть отношения родитель-потомок), в
App ловить событие через
$on и менять значение, в случае
StepOne -
isListItemSelected = true. То же самое и с остальными.
Если надо что-то менять при перемещении ползунков - то когда из компонента с ними делаете
$emit и меняете какие-то значения в родительском
App - их можно спускать через
props в следующий компонент:
<StepThree v-if="isRangeShowing" :range="rangeValues"></StepThree>
и не забыть указать в StepThree параметр
props: ['range'].
Средний