En este artículo aprenderás cómo se puede utilizar v-model para vincular datos a elementos de entrada y salida en tus componentes personalizados. Tendrás una forma más de estructurar tus componentes adicional a escribir valores y eventos para vincular datos en tu aplicación.

En este artículo aprenderás:

1. ¿Qué es v-model?
2. ¿Cómo se usa v-model en elementos HTML nativos?
3. ¿Cómo se usa en componentes personalizados?

¿Qué es v-model?

v-model es una directiva de Vue que se utiliza para crear enlaces bidireccionales entre datos y elementos de entrada (como inputs, selects y textareas). Cuando se crea un enlace bidireccional, los cambios en el elemento de entrada aftectan el valor de la variable de datos y viceversa. Esta directiva reemplaza la necesidad de usar eventos como @input y @change para actualizar el valor de una variable.

¿Cómo se usa v-model en elementos HTML nativos?

*El comportamiento del código en los siguientes ejemplos es el mismo.

Antes

<script setup lang="ts">
  const searchText = ref("");
</script>
<template>
  <input :value="searchText" @input="searchText = $event.target.value" />
</template>

Después

<script setup lang="ts">
  const searchText = ref("");
</script>
<template>
  <input v-model="searchText" />
</template>

¿Cómo se usa en componentes personalizados?

Antes

<script setup lang="ts">
  import SearchInput from "@/components/SearchInput";
  const searchText = ref("");
</script>
<template>
  <SearchInput :value="searchText" @input="searchText = $event" />
</template>

SearchInput (Componente personalizado)

<script setup lang="ts">
  import { defineProps, defineEmits } from "vue";
  const props = defineProps<{
    value: string;
  }>();

  const emits = defineEmits<{
    (e: "input", value: string): void;
  }>();

  function handleInput(event: Event) {
    emits("input", event.target.value);
  }
</script>
<template>
  <input :value="value" @input="handleInput" />
</template>

Después

<script setup lang="ts">
  import SearchInput from "@/components/SearchInput";
  const searchText = ref("");
</script>
<template>
  <SearchInput v-model="searchText" />
</template>

SearchInput (Componente personalizado)

<script setup lang="ts">
  import { defineProps, defineEmits } from "vue";
  const props = defineProps<{
    value: string;
  }>();

  const emits = defineEmits<{
    (e: "update:modelValue", value: string): void;
  }>();

  function handleInput(event: Event) {
    emits("update:modelValue", event.target.value);
  }
</script>

<template>
  <input :value="value" @input="handleInput" />
</template>