Ref, v-model
Les Refs et les v-models dans Vue.js
Liens utiles
Introduction
Dans ce chapitre, nous allons explorer les concepts des refs et des v-models dans Vue.js. Les refs sont utilisés pour déclarer des états réactifs dans une application Vue.js, tandis que les v-models permettent de lier facilement des données à des éléments de formulaire. Nous allons découvrir comment utiliser ces fonctionnalités pour améliorer la réactivité et l'interactivité de nos applications.
Les Refs
Les refs sont utilisés pour déclarer et accéder à des états réactifs dans une application Vue.js. Nous allons commencer par apprendre comment déclarer un état réactif en utilisant la fonction ref() de la Composition API.
Déclaration de l'état réactif avec la fonction ref()
La fonction ref() est recommandée pour déclarer un état réactif dans la Composition API. Elle enveloppe la valeur passée en argument dans un objet ref avec une propriété .value. Par exemple :
import { ref } from 'vue'
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
Nous pouvons également accéder aux refs dans le template d'un composant en les déclarant dans la balise script. Par exemple :
<script setup>
import { ref } from 'vue';
// Déclaration du ref
const count = ref(0);
</script>
Dans le template, nous pouvons utiliser directement le ref sans avoir besoin d'ajouter .value. Par exemple :
<template>
<div>{{ count }}</div>
</template>
Mutation d'un ref dans les gestionnaires d'événements
Les refs peuvent être mutés directement dans les gestionnaires d'événements. Par exemple, nous pouvons incrémenter la valeur d'un ref dans un gestionnaire d'événements de cette façon :
<template>
<div>
<p>Le compteur est à : {{ count }}</p>
<button @click="count++">Incrémenter</button>
</div>
</template>
Déclaration de fonctions pour modifier les refs
Pour des logiques plus complexes, nous pouvons déclarer des fonctions qui modifient les refs dans la même portée et les exposer comme méthodes du composant. Par exemple :
<script setup>
import { ref } from 'vue';
// Déclaration du ref
const count = ref(0);
// Définition de la fonction d'incrémentation
function increment() {
count.value++;
}
</script>
Les méthodes exposées peuvent ensuite être utilisées comme gestionnaires d'événements. Par exemple :
<template>
<div>
<p>Le compteur est à : {{ count }}</p>
<button @click="increment">Incrémenter</button>
</div>
</template>
Les v-models
Les v-models sont utilisés pour lier facilement des données à des éléments de formulaire dans une application Vue.js. Ils simplifient la gestion des données des formulaires et permettent une mise à jour automatique des valeurs liées.
Utilisation du v-model pour lier des données à des éléments de formulaire
Le v-model peut être utilisé avec les éléments de formulaire courants tels que les champs de saisie, les sélecteurs et les zones de texte. Par exemple, nous pouvons utiliser le v-model pour lier une variable à un champ de saisie :
<template>
<input v-model="name" />
<div>Valeur : {{ name }}</div>
</template>
Personnalisation du comportement du v-model avec des composants personnalisés
Le v-model peut également être utilisé avec des composants personnalisés pour personnaliser le comportement de la liaison des données. Pour cela, nous devons créer un composant avec une prop value et un événement input. Par exemple :
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
// Déclaration du ref pour le message
const message = ref('');
</script>
<template>
<custom-input v-model="message"></custom-input>
</template>
Dans le composant CustomInput, nous devons émettre l'événement input pour mettre à jour la valeur liée. Par exemple :
<script setup>
import { defineProps, defineEmits } from 'vue';
// Définition des props
const props = defineProps({
value: String,
});
// Définition des événements
const emit = defineEmits(['input']);
</script>
<template>
<input :value="props.value" @input="$emit('input', $event.target.value)" />
</template>
Utilisation du v-model avec des composants tiers
Le v-model peut également être utilisé avec des composants tiers qui prennent en charge cette fonctionnalité. Par exemple, certains composants de bibliothèques populaires comme Vuetify et Element Plus prennent en charge le v-model pour faciliter la liaison des données.
Exemple pratique
Pour illustrer l'utilisation des refs et des v-models, nous allons créer un exemple pratique. Voici le code de l'exemple :
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('');
</script>
<template>
<h2>Compteur</h2>
<button class="btn btn-primary" @click="count++">{{ count }}</button>
<h2 class="mt-3">Nom</h2>
<div>Valeur : {{ name.length > 0 ? name : 'pas de nom' }}</div>
<input v-model="name" />
</template>