Vue 3 Props

Synchron halten

Für unsere Rezepte-App benötigen wir die Möglichkeit Props zwischen Parent- und Child-Components synchron zu halten. Gab es hierfür in Vue 2 noch den .sync-Modifier, läuft es in Vue 3 hingegen nun ein wenig anders.

Um die Daten zwischen Parent- und Child-Components synchron zu halten fügt man dem Prop-Attribut ein v-model vorne an.

Parent Component

<template>
    <child-component v-model:name-prop="name" />
</template>

<script>
...
data() => ({
    name: '',
    ...
}),
...
</script>

Child Component

<template>
    ...
    <input type="text v-model="name" :value="nameProp" @keyup="$emit('update:nameProp', name)" />
    ...
</template>

<script>
...
props: {
    nameProp: {
        type: String
    }
}

data() => ({
    name: '',
    ...
}),
...
</script>