@jeffreyway Thanks for this course, it's really helpful. Currently I have a question regarding parent / child communication in my head and I wonder how this would work for others.

I've built a multi step form with Inertia and the parent component has an array of all steps in the form. It looks like this:

let form = useForm({
    company: null,
    password: null,
})

const steps = ref([
    {
        label: 'Company',
        valid: false,
        skip: false,
        status: 'current',
        component: markRaw(Company),
    },
    {
        label: 'Password',
        valid: false,
        skip: false,
        status: 'upcoming',
        component: markRaw(Password),
    },

In the template of this component I iterate the steps and dynamically inject the component into the dynamic slots of the MultiStepForm component:

<MultiStepForm
                ref="multiStepForm"
                :activeStepIndex="activeStepIndex"
                :steps="steps"
                @goBackStep="goBackStep"
                @onComplete="submitForm"
                @validateStep="validateStep"
            >
                <template
                    v-for="(step, index) in steps"
                    :key="index"
                    v-slot:[`step${index}`]
                >
                    <KeepAlive>
                        <component
                            :is="step.component"
                            :form="form"
                            :user="props.user"
                            @form-updated="onFormUpdated"
                        >
                        </component>
                    </KeepAlive>
                </template>

The issue I now face is that, as I dynamically inject the components, I can not pass the props and listen to the events individually. Basically I can not do this:

<component
            :is="step.component"
            :formCompany="form.company"
            :formPassword="form.password"
            @form-company-updated="onFormCompanyUpdated"
            @form-password-updated="onFormPasswordUpdated"
        >

For me, this makes less sense (but this would be more like your example in the video), as it takes the advantage of dynamic injection away. Currently, to add another step, I just need to extend the array and build the component for the step. That's it.

So, I looked at the similarities and all the steps have in common that they rely on the form. So I inject the whole form as the prop into the children. In the child, I do this:

const onUpdateCompany = (company) => {
    props.form.company = company;
    emit('form-updated', props.form);
};

<TextInput
                id="company"
                :modelValue="form.company"
                type="text"
                @change="onUpdateCompany($event.target.value)"
            />

So, when the value of the company changes, I change it in the form and pass the whole form to the parent. In the parent I change the form with the one from the event:

const onFormUpdated = (updatedForm) => {
    form = updatedForm;
};

I hope anybody can follow me until here, but I am wondering if this is the right way to do (it's working :)). But how would you have solved it? Thanks!

Parent-Child State Communication