Créer des composants Vue.js avec slots
Objectifs
Les objectifs de cette vidéo sont de :
- Comprendre le concept des slots avec portée dans Vue.js.
- Savoir comment passer des données des composants enfants aux composants parents.
- Apprendre à personnaliser l'affichage des données dans les composants parents.
Résumé
Cette leçon couvre l'utilisation des slots avec portée dans Vue.js pour passer des données des composants enfants aux composants parents.
Description
Dans cette leçon, nous allons explorer comment les slots avec portée peuvent être utilisés efficacement dans Vue.js pour accéder aux données encapsulées dans les composants enfants depuis les composants parents. Nous débuterons par la création d'un composant nommé Employer contenant des objets JSON représentant des personnes. En utilisant une directive v-for, nous afficherons ces données puis nous introduirons un slot pour rendre ce tableau accessible au composant parent. Nous détaillerons ensuite comment modifier l'affichage des données au sein du parent en appliquant des styles tels que l'italique et la mise en majuscule.
Cette approche permet de garder les composants modulaires et réutilisables tout en offrant une flexibilité dans la présentation des données. Nous illustrerons cela pas à pas avec des exemples concrets et exécuterons le code pour vérifier son bon fonctionnement.
Questions fréquentes
Programme détaillé
Module 1 - Premiers pas en Vue3
Module 2 - Les composants Vue JS
Module 3 - Les applications SPA (Single Page Applications)
Module 4 - L'interface en ligne de commande Vue-Cli
Module 5 - Le gestionnaire d'état Vuex
Module 6 - Le gestionnaire d'état Pinia
Module 7 - Persistance des données avec Firebase
Module 8 - Plus loin avec Vue.js 3
