Snippet

Komponenten-Fehlergrenze mit onErrorCaptured

Der Lifecycle-Hook onErrorCaptured registriert einen Fehler-Handler, der Fehler aus untergeordneten Komponenten abfängt. Das Zurückgeben von false verhindert, dass der Fehler weiter in der Komponentenhierarchie aufsteigt.

snippet.js

javascript

import { ref, onErrorCaptured } from 'vue';
 
export default {
  setup() {
    const errorMessage = ref(null);
 
    onErrorCaptured((err) => {
      errorMessage.value = err.message;
      return false;
    });
 
    return { errorMessage };
  }
};

vue

Erklärung

const errorMessage = ref(null);

Erstellt eine reaktive Variable zur Speicherung der Fehlermeldung bei einem Fehler.

onErrorCaptured((err) => {

Registriert einen Hook, um Laufzeitfehler von Kindkomponenten abzufangen.

errorMessage.value = err.message;

Speichert die Fehlermeldung in der reaktiven Variable zur Anzeige im Template.

return false;

Verhindert, dass der Fehler weiter zu Elternkomponenten aufsteigt oder die App zum Absturz bringt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Komponenten-Fehlergrenze mit onErrorCaptured

Verwandt