Cours 07 - Vue.js – Composants Vue.js et leurs interactions 1

Table des matières

Objectifs

Déroulement

Notions de base

Observateur et v-model

Nous allons voir deux concepts importants pour la gestion de la réactivité et la liaison de données dans Vue.js 3 :

watch (observateur)

Les watchers permettent d'exécuter du code en réaction aux changements d'une variable réactive.
Exemple d'utilisation :

<script setup lang="ts">
import { ref, watch } from 'vue'

const message = ref('')

watch(message, (newValue, oldValue) => {
    console.log(`Message changé de "${oldValue}" à "${newValue}"`)
})
</script>

v-model

Le v-model permet une liaison bidirectionnelle entre un élément de formulaire et une variable.

<input v-model="message" type="text" />
<p>Message : {{ message }}</p>

Communication entre composants avec emit et la communication parent-enfant

emit

Un composant enfant peut émettre un événement à son parent grâce à $emit.

<script setup lang="ts">
defineEmits(['custom-event'])

function sendMessage() {
    emit('custom-event', 'Hello Parent!')
}
</script>

Communication Parent-Enfant

Dans un composant parent, on peut écouter cet événement :

<ChildComponent @custom-event="handleEvent" />
<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'

function handleEvent(message: string) {
    console.log("Reçu depuis l'enfant :", message)
}
</script>

Cette section permettra d'approfondir la communication entre composants et les bonnes pratiques associées.

Liens utiles

Atelier 07 - Vue.js - Réactivité et Communication entre Composants

Vidéo de démonstration

Écoutez la vidéo en faisant l'atelier 05

Partie 01 - Installation et démarrage d’un projet Vue.js

Partie 02 - Création d’un composant avec v-model et watch

Étape 1 : Création du fichier du composant

Dans le dossier components, créez un fichier nommé ChildComponent.vue.

Étape 2 : Définition des propriétés et des événements

Ajoutez le code suivant au début du fichier ChildComponent.vue :

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

const props = defineProps<{ 
    textValue: string; 
    selectedValue: string
}>()
const emit = defineEmits(['update:textValue', 'update:selectedValue'])

Étape 3 : Surveillance des changements avec watch

Ajoutez le code suivant sous l'initialisation des props et des événements :

watch(() => props.textValue, (newValue) => {
    console.log('Nouvelle valeur du champ texte :', newValue)
})

watch(() => props.selectedValue, (newValue) => {
    console.log('Nouvelle valeur sélectionnée :', newValue)
})
</script>

Étape 4 : Création du template du composant

Ajoutez le code suivant sous la balise <script setup> pour afficher un champ de texte et une liste déroulante :

<template>
  <div>
    <input 
      type="text" 
      :value="textValue" 
      @input="emit('update:textValue', ($event.target as HTMLInputElement).value)"
    />

    <select :value="selectedValue" @change="emit('update:selectedValue', ($event.target as HTMLSelectElement).value)">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
</template>

Étape 5 : Explications générales

  1. Le parent passe les valeurs via v-model, qui sont automatiquement assignées dans l'enfant.
  2. Quand l'utilisateur modifie le champ texte ou la sélection, les événements update:textValue et update:selectedValue sont émis pour informer le parent des changements.
  3. Le parent met à jour ses propres valeurs, ce qui met à jour l'affichage dans l'enfant.

Partie 03 - Utilisation du composant dans le parent

Étape 1 : Création du composant parent App.vue

Dans App.vue, nous allons intégrer le composant enfant avec v-model.

Étape 2 : Déclaration des variables réactives

Ajoutez le code suivant dans la section <script setup> :

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

const textValue = ref('')
const selectedValue = ref('option1')
</script>

Étape 3 : Affichage et utilisation du composant enfant

Ajoutez le code suivant sous la balise <template> :

<template>
  <div class="container">
    <h2>Communication Parent-Enfant avec v-model</h2>
    <p>Texte dans le parent: {{ textValue }}</p>
    <p>Option sélectionnée dans le parent: {{ selectedValue }}</p>
    <ChildComponent v-model:textValue="textValue" v-model:selectedValue="selectedValue" />
  </div>
</template>

Étape 4 : Explications générales

  1. Lier le parent et l'enfant grâce à v-model permet une synchronisation automatique.
  2. Quand l'utilisateur modifie l’input ou la sélection dans ChildComponent, les valeurs sont propagées au parent.
  3. L’affichage du parent est mis à jour en temps réel.

Partie 04 - Utilisation de watch pour surveiller une variable réactive

Ajoutez watch dans App.vue pour observer les changements des valeurs.

watch(textValue, (newValue, oldValue) => {
    console.log(`Le texte est passé de ${oldValue} à ${newValue}`)
})

watch(selectedValue, (newValue, oldValue) => {
    console.log(`L'option sélectionnée est passée de ${oldValue} à ${newValue}`)
})
  1. Chaque modification des valeurs est détectée grâce à watch.
  2. L’ancien et le nouveau contenu sont affichés dans la console.
  3. Les changements sont capturés en temps réel par le parent.

Conclusion

Dans cet atelier, nous avons couvert plusieurs concepts essentiels de Vue.js :
Installation et configuration d’un projet Vue.js avec Vite et TypeScript
Utilisation de v-model pour la communication bidirectionnelle entre composants
Gestion d'un champ texte et d'une liste déroulante avec v-model
Écoute des changements d’une variable avec watch
Mise en pratique des interactions entre composants parent et enfant

Aucune remise pour cet atelier.

Questionnaire 07

Vous devez remplir le questionnaire pour la fin du cours!