isset Vue içince component isimli özel bir element var:
https://vuejs.org/api/built-in-special-elements#component
Bunu kullanarak dinamik bir şekilde component yükleyebiliyorsunuz. Dokümandaki örnekten yola çıkarak şöyle bir şey yapılabilir:
<script setup>
import { ref, computed } from 'vue'
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'
import Step3 from './Step3.vue'
const step = ref(1)
const stepComponent = computed(() => `Step${step.value}`)
const form = useForm({
name: '',
username: '',
email: '',
password: '',
password_confirmation: '',
terms: false,
});
const nextStep = () {
if (step.value < 3) {
step.value++
}
}
const prevStep = () {
if (step.value > 1) {
step.value--
}
}
const update = (data) => {
// form objesini step içinden gelen veri ile güncelle...
}
</script>
<template>
<component :is="stepComponent"
:form="form"
@update="update" />
</template>
Örneğin nextStep yöntemini çağırdınız. step değeri 2 oldu, <component> olduğu yere Step2 componentini yükleyecek. İçinde kendi form objenize ulaşabilirsiniz. Step2 componenti içinde de emit('update', stepData.value) gibi bir şey yapıp parent içindeki update ile formu child içindeki veri ile güncelleyebilirsiniz. Kabaca böyle bir şey yapılabilir.
Böyle bir şeye ihtiyaç var mı emin değilim. Sanki tek component içinde v-if ya da v-show ile halledilebilecek gibi duruyor.