Korrekt Warnen bei falscher v-Slot-Nutzung

Einführung

In diesem Projekt lernst du, wie du einen Fehler im Code von vue-router 3.1.3 beheben kannst, bei dem das Rendern der Komponente fehlschlägt, wenn du eine Router-Link-Komponente mithilfe der v-slot-API erstellst und mehrere untergeordnete Elemente angibst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Problem im Code von vue-router 3.1.3 lokalisiert und identifizierst
• Wie du das Problem behebst, indem du den Code in der Datei link.js modifizierst
• Wie du das gefixte vue-router 3.1.3-Projekt neu baufst und veröffentlicht
• Wie du die Wirksamkeit der Behebung durch das Testen der Anwendung überprüfst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Probleme in einer Drittanbieter-Bibliothek zu diagnostizieren und zu beheben
• Ein Projekt nach Änderungen am Code neu zu bauen und zu veröffentlichen
• Die Funktionalität eines behobenen Problems zu testen und zu überprüfen

Behebe das Problem mit der V-Slot-API in Vue-Router 3.1.3

Um loszulegen, betrachte die Verzeichnisstruktur der Dateien links wie folgt:

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

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, dann öffne die Option Konsole in der Browserkonsole, um die Seite im Browser wie unten gezeigt anzuschauen:

In diesem Schritt behebst du das Problem im Code von vue-router 3.1.3, bei dem das Rendern der Komponente fehlschlägt, wenn du eine Router-Link-Komponente mithilfe der v-slot-API erstellst und mehrere untergeordnete Elemente angibst.

1. Öffne die Datei vue-router-3.1.3/src/components/link.js.
2. Lasse dir den folgenden Codeblock anzeigen:

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. Aktualisiere den Code wie folgt:

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);
  }
}

Die Hauptänderung befindet sich in der Warnmeldung, in der this.props.to durch this.to ersetzt wurde.

Neubau und Test des gefixten Vue-Router 3.1.3

In diesem Schritt bau wirst du das vue-router 3.1.3-Projekt neu auf und testen die Wirksamkeit der Behebung.

1. Öffne das Verzeichnis vue-router-3.1.3 in der Konsole.
2. Führe den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Vorgang kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie Ctrl+C, um den Vorgang zu beenden, und führen Sie dann diesen Befehl erneut aus.)
3. Nachdem alle Abhängigkeiten erfolgreich installiert wurden, führe den Befehl npm run build aus, um das Projekt neu zu bauen und zu veröffentlichen.
4. Klicke auf die Option "Web 8080" oben im VM und aktualisiere die Seite manuell.
5. Öffne die Browserkonsole und überprüfe, dass die Fehlermeldung "TypeError: this.props is undefined" nicht mehr angezeigt wird.
6. Vergewissern Sie sich, dass die Seite jetzt mit dem behobenen Problem der v-slot-API korrekt gerendert wird.

Das Bild des Effekts nach der Behebung des Problems ist unten gezeigt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.