Signaler correctement l'utilisation incorrecte de v-slot

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans le code de vue-router 3.1.3 où le rendu du composant échoue lors de la création d'un composant de lien de route en utilisant l'API v-slot et en fournissant plusieurs éléments enfants.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment localiser et identifier le problème dans le code de vue-router 3.1.3
• Comment corriger le problème en modifiant le code dans le fichier link.js
• Comment reconstruire et publier le projet vue-router 3.1.3 corrigé
• Comment vérifier l'effet du corriger en testant l'application

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Dépanner et corriger les problèmes dans une bibliothèque tiers
• Rebâtir et publier un projet après avoir apporté des modifications au code
• Tester et vérifier la fonctionnalité d'un problème corrigé

Skills Graph

Corrigez le problème de l'API v-slot dans Vue-Router 3.1.3

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

├── vue-router-3.1.3
├── vue.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement, puis ouvrez l'option Console dans la console de votre navigateur pour prévisualiser la page dans votre navigateur comme indiqué ci-dessous :

Dans cette étape, vous allez corriger le problème dans le code de vue-router 3.1.3 où le rendu du composant échoue lors de la création d'un composant de lien de route en utilisant l'API v-slot et en fournissant plusieurs éléments enfants.

1. Ouvrez le fichier vue-router-3.1.3/src/components/link.js.
2. Localisez le bloc de code suivant :

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.props.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

3. Mettez à jour le code comme suit :

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

Le principal changement se trouve dans le message d'alerte, où this.props.to a été remplacé par this.to.

Rebâtissez et testez le Vue-Router 3.1.3 corrigé

Dans cette étape, vous allez reconstruire le projet vue-router 3.1.3 et tester l'effet du corriger.

1. Ouvrez le répertoire vue-router-3.1.3 dans le terminal.
2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
3. Une fois toutes les dépendances installées avec succès, exécutez la commande npm run build pour reconstruire et publier le projet.
4. Cliquez sur l'option "Web 8080" en haut de la VM et rafraîchissez la page manuellement.
5. Ouvrez la console du navigateur et vérifiez que l'erreur "TypeError: this.props is undefined" n'est plus affichée.
6. Vérifiez que la page est maintenant correctement affichée avec le problème de l'API v-slot corrigé.

L'image de l'effet après le corriger du problème est affichée ci-dessous :

Sommaire

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.