Création d'un composant d'entrée personnalisé avec la liaison v-model dans Vue 3

Lors de la création d'une application Vue 3, la gestion des entrées de formulaire via des composants est une pratique courante. L'une des fonctionnalités puissantes de Vue est la directive v-model, qui simplifie la liaison de données bidirectionnelle. Dans cet article de blog, nous explorerons comment créer un composant d'entrée personnalisé et utiliser v-model pour lier sa valeur dans un composant parent.

1. Comprendre le v-model dans Vue 3

Dans Vue 3, v-model est un raccourci permettant de créer des liaisons de données bidirectionnelles sur les éléments d'entrée de formulaire. La directive lie la valeur de l'entrée à une propriété de données et écoute les modifications pour mettre à jour la propriété.

<input v-model="password" />

Dans l'exemple ci-dessus, la propriété de données de mot de passe est liée à la valeur d'entrée. Lorsque la valeur d'entrée change, la propriété du mot de passe est automatiquement mise à jour.

2. Création du composant d'entrée personnalisé

Disons que nous voulons créer un composant d'entrée réutilisable appelé BaseInputGroup. Voici à quoi pourrait ressembler le composant :

<template>
  <div class="flex flex-col text-white mx-5 md:mx-0 space-y-2 mb-2">
    <label :for="labelFor">
      {{ labelFor.toLocaleUpperCase() }}
    </label>
    <input
      :type="type"
      :name="name"
      @input="$updateInputValue"
      :value="modelValue"
      class="p-2 px-4 rounded-2xl bg-white/15 focus:outline-none focus:ring focus:border-blue-500"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineOptions, defineEmits } from 'vue'

defineOptions({
  inheritAttrs: false
})

defineProps({
  labelFor: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'text'
  },
  modelValue: {
    type: [String, Number],
    default: ''
  }
})

// Emit an event to update the v-model in the parent component
const emit = defineEmits(['update:modelValue'])
const $updateInputValue = (event: Event) => {
  const input = event.target as HTMLInputElement
  emit('update:modelValue', input.value)
}
</script>

3. Liaison du v-model dans le composant parent

Pour utiliser ce composant dans un composant parent avec v-model, vous liez simplement le modèle à une propriété de données dans le composant parent. Voici un exemple :

<template>
  <BaseInputGroup
    labelFor="password"
    name="password"
    type="password"
    v-model="password"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseInputGroup from './components/BaseInputGroup.vue'

const password = ref('')
</script>

4. Comment ça marche

Model Value Prop : Le prop modelValue représente la valeur de l'entrée. Il est transmis du composant parent via v-model.

Émission de la mise à jour : la fonction $updateInputValue écoute les événements d'entrée et émet un événement update:modelValue avec la nouvelle valeur d'entrée. Cela met à jour la valeur du mot de passe du composant parent.

Liaison dans le parent : dans le composant parent, la directive v-model se lie à la propriété de données de mot de passe, garantissant que la valeur est toujours synchronisée avec le composant d'entrée personnalisé.

5. Avantages de l'utilisation de composants personnalisés avec v-model

Réutilisabilité : le composant d'entrée personnalisé peut être réutilisé dans votre application, réduisant ainsi la duplication de code.

Séparation des préoccupations : la logique de gestion des valeurs d'entrée est encapsulée dans le composant, ce qui rend le composant parent plus propre et plus concentré sur sa fonctionnalité principale.

Personnalisation : vous pouvez facilement étendre le composant de saisie personnalisé pour inclure des fonctionnalités supplémentaires, telles que la validation, différents types de saisie ou des styles personnalisés, sans affecter le composant parent.

Conclusion

L'utilisation de v-model avec des composants personnalisés dans Vue 3 est un moyen puissant de gérer les entrées de formulaire et la liaison de données. En émettant l'événement update:modelValue, vous pouvez vous assurer que vos composants restent synchronisés avec les propriétés de données du composant parent, ce qui rend votre code plus modulaire, maintenable et plus facile à comprendre.

Ce modèle est particulièrement utile dans les applications plus importantes où la logique de gestion des entrées peut devenir complexe et répétitive. En tirant parti de l'API de composition de Vue 3 et de la directive v-model, vous pouvez créer des composants flexibles et réutilisables qui simplifient votre base de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!