v-model na Komponentach

v-model na natywnych elementach HTML (

<input>

,

<select>

) to skrót dla

:value

+

@input

. Ale v-model działa też na custom komponentach - to jak dwukierunkowa synchronizacja danych między Ziemią a Marsem!

Jak działa v-model na komponencie?

1<!-- Rodzic używa v-model -->
2<MarsInput v-model="message" />
3
4<!-- Jest równoważne z: -->
5<MarsInput
6  :modelValue="message"
7  @update:modelValue="message = $event"
8/>

Implementacja w komponencie

Komponent musi:

1. Przyjąć prop

   modelValue

2. Emitować event

   update:modelValue

1<!-- MarsInput.vue -->
2<script setup>
3defineProps(['modelValue'])
4const emit = defineEmits(['update:modelValue'])
5</script>
6
7<template>
8  <input
9    :value="modelValue"
10    @input="emit('update:modelValue', $event.target.value)"
11  />
12</template>

Multiple v-model

Vue 3 pozwala na wiele v-model na jednym komponencie:

1<!-- Rodzic -->
2<template>
3  <CrewForm
4    v-model:first-name="firstName"
5    v-model:last-name="lastName"
6  />
7</template>
8
9<!-- CrewForm.vue -->
10<script setup>
11defineProps(['firstName', 'lastName'])
12const emit = defineEmits(['update:firstName', 'update:lastName'])
13</script>
14
15<template>
16  <input
17    :value="firstName"
18    @input="emit('update:firstName', $event.target.value)"
19  />
20  <input
21    :value="lastName"
22    @input="emit('update:lastName', $event.target.value)"
23  />
24</template>

v-model Modifiers

Możesz tworzyć custom modyfikatory:

1<!-- Rodzic -->
2<MarsInput v-model.uppercase="text" />
3
4<!-- MarsInput.vue -->
5<script setup>
6const props = defineProps({
7  modelValue: String,
8  modelModifiers: { default: () => ({}) }
9})
10const emit = defineEmits(['update:modelValue'])
11
12function onInput(e) {
13  let value = e.target.value
14  if (props.modelModifiers.uppercase) {
15    value = value.toUpperCase()
16  }
17  emit('update:modelValue', value)
18}
19</script>
20
21<template>
22  <input :value="modelValue" @input="onInput" />
23</template>