25 Vue-Tipps, die Sie kennen müssen

1. Beschränken Sie Requisiten auf Typlisten

Mit der validator -Option in prop Definition können Sie prop auf einen bestimmten Wertesatz beschränken:

Standard exportieren {
  Name: 'Bild',
  Requisiten: {
    Quelle: {
      Typ: Zeichenfolge,
    },
    Stil: {
      Typ: Zeichenfolge,
      Validator: s => ['quadratisch', 'gerundet'].includes(s)
    }
  }
};

Diese validator akzeptiert eine prop und gibt true oder false zurück. Es kann auch verwendet werden, wenn Sie mehr Optionen benötigen, als der Boolesche Wert zulässt. Zu den häufigeren Verwendungszwecken zählen Schaltflächentypen oder Alarmtypen (Information, Erfolg, Gefahr, Warnung).

2. Standardinhalte und Erweiterungspunkte

Slots in Vue können Standardinhalte haben, wodurch Sie Komponenten erstellen können, die einfacher zu verwenden sind:

<button class="button" @click="$emit('click')">
  <Steckplatz>
    <!-- Wird verwendet, wenn kein Steckplatz vorhanden ist -->
    Klick mich
  </slot>
</button>

Grundsätzlich können Sie jeden beliebigen Teil einer Komponente nehmen, ihn in einen slot einschließen und dann diesen Teil der Komponente mit allem überschreiben, was Sie möchten. Standardmäßig funktioniert es weiterhin wie gewohnt, Sie können jedoch auch aus einigen weiteren Optionen wählen:

<Vorlage>
  <button class="button" @click="$emit('click')">
    <!-- Fügen Sie zunächst ein Slot-Tag hinzu, das nichts tut -->
    <!-- Wir können dies überschreiben, indem wir dem Slot Inhalt bereitstellen -->
    <Steckplatz>
      <div Klasse="Formatierung">
        {{ text }}
      </div>
    </slot>
  </button>
</Vorlage>

Nun können Sie dieses Bauteil vielfältig einsetzen.

Einfache Standardmethode oder Ihre eigene benutzerdefinierte Methode:

<!-- Standardfunktionalität der Komponente verwenden -->
<ButtonWithExtensionPoint text="Formatierter Text" />

<!-- Erweiterungspunkte verwenden, um benutzerdefiniertes Verhalten zu erstellen -->
<SchaltflächeMitErweiterungspunkt>
  <div Klasse="unterschiedliche-formatierung">
    Machen Sie hier etwas anderes</div>
</ButtonWithExtensionPoint>

3. Verwenden Sie Anführungszeichen, um verschachtelte Werte zu erkennen

Das wissen Sie vielleicht nicht: Sie können sich verschachtelte Werte ganz einfach direkt ansehen, indem Sie Anführungszeichen verwenden:

betrachten {
  '$route.query.id'() {
    // ...
  }
}

Dies ist sehr nützlich für den Umgang mit tief verschachtelten Objekten.

4. Wissen, wann v-if zu verwenden ist (und wann es zu vermeiden ist)

Manchmal v-show會anstelle von v-if zu verwenden:

<ComplicatedChart v-show="chartAktiviert" />

Wenn v-if ein- und ausgeschaltet wird, wird das Element vollständig erstellt und zerstört. v-show unterscheidet sich darin, dass es das Element erstellt und dort belässt und es ausblendet, indem sein Stil auf display: none gesetzt wird.

Wenn das Rendern der Komponente, die Sie umschalten müssen, teuer ist, ist dies möglicherweise effizienter. Wenn Sie diese Komponente hingegen nicht sofort benötigen, verwenden Sie v-if, damit das Rendern übersprungen und die Seite schneller geladen wird.

5. Abkürzung für Slots mit einem einzigen Bereich (keine Vorlagen-Tags erforderlich!)

Scoped slot sind interessanter, aber um sie zu verwenden, müssen Sie auch viele template Tags verwenden.

Es gibt eine Abkürzung, mit der wir damit durchkommen, aber nur, wenn wir einen einzigen slot verwenden.

Anstatt zu schreiben:

<Datentabelle>
  <Vorlage #header="Tabellenattribute">
    <TableHeader v-bind="Tabellenattribute" />
  </Vorlage>
</DataTable>

Wir können es so schreiben:

<Datentabelle #header="Tabellenattribute">
  <TableHeader v-bind="Tabellenattribute" />
</DataTable>

Das ist einfacher und direkter.

6. Slots bedingt rendern

Jede Vue -Komponente hat ein spezielles $slots -Objekt, das alle slot enthält. Standard slot haben Standardschlüssel und benannte Slots verwenden ihre Namen als Schlüssel:

const $slots = {
  Standard: <Standardsteckplatz>,
  Symbol: <Symbolplatz>,
  Schaltfläche: <Schaltflächenplatz>,
};

Aber dieses $slots -Objekt hat nur slot , die für die Komponente gelten, nicht jeden definierten slot .

Nehmen Sie diese Komponente, die mehrere Slots definiert, darunter mehrere benannte Slots:

<!-- Slots.vue -->
<Vorlage>
  <div>
    <h2>Hier sind einige Slots</h2>
    <Steckplatz />
    <slot name="zweite" />
    <slot name="dritter" />
  </div>
</Vorlage>

Wenn wir einer Komponente nur einen Slot zuweisen, wird nur dieser Slot in unserem $slots-Objekt angezeigt:

<Vorlage>
  <Spielplätze>
    <Vorlage #Sekunde>
      Dies wird auf den zweiten Steckplatz angewendet
    </Vorlage>
  </Slots>
</Vorlage>

$slots = { Sekunde: <vnode> }

Wir können dies in unseren Komponenten verwenden, um zu erkennen, welche slot der Komponente zugewiesen wurden.

Zum Beispiel durch Ausblenden slot : \

<Vorlage>
  <div>
    <h2>Ein Paketplatz</h2>
    <div v-if="$slots.default" class="styles">
      <Steckplatz />
    </div>
  </div>
</Vorlage>

Jetzt wird der div Wrapper mit den angewendeten Stilen nur gerendert, wenn wir diesen slot tatsächlich mit etwas füllen.

Wenn wir v-if nicht verwenden, erhalten wir ein leeres und unnötiges div wenn wir slot nicht haben. Abhängig von den Stilen des Divs könnte dies unser Layout durcheinanderbringen und dazu führen, dass Dinge seltsam aussehen.

6.1 Warum möchten wir Slots bedingt rendern können?

Es gibt drei Hauptgründe für die Verwendung bedingter Slots:

• Bei Verwendung wrapper div zum Hinzufügen von Standardstile
• slot ist leer
• Wenn wir Standardinhalte mit verschachtelten slot kombinieren
  

Wenn wir beispielsweise die Standardstile hinzufügen, fügen wir ein Div um slot hinzu:

<Vorlage>
  <div>
    <h2>Das ist eine ziemlich tolle Komponente, oder?</h2>
    <div Klasse="Standard-Styling">
      <Steckplatz>
    </div>
    <button @click="$emit('click')">Klick mich!</button>
  </div>
</Vorlage>

Wenn die übergeordnete Komponente jedoch keinen Inhalt auf diesen Slot anwendet, wird auf der Seite ein leeres Div gerendert:

<div>
  <h2>Das ist eine wirklich coole Komponente</h2>
  <div Klasse="Standard-Styling">
    <!-- Der Slot enthält keinen Inhalt, aber dieses Div wird trotzdem gerendert-->
  </div>
  <button @click="$emit('click')">Klick mich!</button>
</div>

Das Hinzufügen von v-if zum umschließenden Div sollte funktionieren. Für den Slot wurde kein Inhalt angewendet? So was:\

<div>
  <h2>Das ist eine wirklich coole Komponente</h2>
  <button @click="$emit('click')">Klick mich!</button>
</div>

7. So beobachten Sie Slot-Änderungen

Manchmal müssen wir wissen, wann sich der Inhalt eines Slots geändert hat:

<!-- Leider existiert diese Veranstaltung nicht-->
<slot @change="aktualisieren" />

Leider verfügt Vue über keine integrierte Methode, um dies zu erkennen. Mithilfe von Mutation Observern lässt sich dies jedoch sehr gut realisieren:

Standard exportieren {
  montiert() {
    // Rufen Sie „update“ auf, wenn sich etwas ändert
    const observer = neuer MutationObserver(dieses.update);

    //Änderungen dieser Komponente beobachten observer.observe(this.$el, {
      Kinderliste: wahr,
      Teilbaum: wahr
    });
  }
};

8. Lokale und globale Stile mischen

Bei der Verwendung von Stilen möchten wir diese häufig auf eine einzelne Komponente beschränken:

<Stilbereich>
  .Komponente {
    Hintergrund: grün;
  }
</Stil>

Bei Bedarf können Sie auch einen nicht bereichsbezogenen Stilblock hinzufügen, um globale Stile hinzuzufügen:

<Stil>
  /*Globale Anwendung*/
  .Komponente p {
    Rand unten: 16px;
  }
</Stil>

<Stilbereich>
  /*Auf diese bestimmte Komponente beschränkt*/
  .Komponente {
    Hintergrund: grün;
  }
</Stil>

9. Stile untergeordneter Komponenten überschreiben – so geht’s

Scoped CSS lässt sich leichter übersichtlich halten und verhindert, dass Stile versehentlich in andere Teile Ihrer Anwendung gelangen. Manchmal müssen Sie jedoch die Stile einer untergeordneten Komponente überschreiben und aus diesem Bereich ausbrechen.

Vue verfügt speziell hierfür über einen Deep Selector:

<Stilbereich>
/* Überschreibe das CSS einer untergeordneten Komponente, während der Stilbereich beibehalten wird */
.meine-Komponente >>> .untergeordnete-Komponente {
  Schriftgröße: 24px;
}
</Stil>

Hinweis: Wenn Sie einen CSS-Präprozessor wie SCSS verwenden, möchten Sie möglicherweise stattdessen /deep/ verwenden.

10. Zaubern Sie mit kontextsensitiven Komponenten

Kontextsensitive Komponenten sind „magisch“ – sie passen sich automatisch an das Geschehen um sie herum an, verarbeiten Randfälle, geben den Status frei und mehr. Es gibt drei Haupttypen kontextabhängiger Komponenten, aber ich finde die Konfiguration am interessantesten von allen.

10.1 Statusfreigabe

Wenn Sie eine große Komponente in mehrere kleinere Komponenten aufteilen, müssen diese häufig weiterhin den gleichen Status aufweisen. Sie können dies „hinter den Kulissen“ tun, anstatt diese Arbeit auf die Personen abzuwälzen, die die Komponente verwenden.

Eine Dropdown Komponente kann in Select und Option zerlegt werden, um mehr Flexibilität zu bieten. Um die Verwendung zu vereinfachen, teilen sich die Select- und Option-Komponenten selected Status miteinander:

<!-- Der Einfachheit halber als einzelne Komponente verwendet -->
<Dropdown v-Modell="ausgewählt" :Optionen="[]" />

<!-- Teilen für mehr Flexibilität -->
<Wählen Sie v-Modell="ausgewählt">
  <Option value="senf">Senf</Option>
  <Optionswert="Ketchup">Ketchup</Option>
  <div Klasse="Relish-Wrapper">
    <Optionswert="genießen">Genießen</Option>
  </div>
</Auswählen>

10.2 Konfiguration

Manchmal müssen Sie das Verhalten einer Komponente basierend auf der Situation im Rest der Anwendung ändern. Dies wird normalerweise durchgeführt, um Randfälle automatisch zu behandeln, die andernfalls problematisch wären. Das Popup oder der Tooltip sollte sich neu positionieren, damit es nicht über die Seite hinausragt. Befindet sich die Komponente jedoch innerhalb eines Modals, sollte sie sich neu positionieren, um einen Überlauf modal zu vermeiden. Dies könnte automatisch erfolgen, wenn Tooltip wüsste, wann er sich in einem Modal befindet.

10.3 Modellierung

Wenn Sie kontextsensitives CSS erstellen, wenden Sie unterschiedliche Stile an, je nachdem, was in einem übergeordneten oder gleichgeordneten Element geschieht.

.statistik {
  Farbe: Schwarz;
  Schriftgröße: 24px;
  Schriftstärke: fett;
}

/* Fügen Sie eine gewisse Trennung zwischen nebeneinander stehenden Statistiken ein */
.statistik + .statistik {
  Rand links: 10px;
}

Variablen in CSS bringen uns einen Schritt weiter, indem sie es uns ermöglichen, in verschiedenen Teilen der Seite unterschiedliche Werte festzulegen.

11. Wie kann man außerhalb von Vue erstellte Variablen responsiv machen?

Wenn Sie eine Variable von außerhalb Vue erhalten, wäre es schön, sie responsiv machen zu können. Auf diese Weise können Sie es in berechneten Props, Beobachtern und überall sonst verwenden, und es funktioniert genau wie jeder andere Status in Vue .

Wenn Sie die Optionen-API verwenden, fügen Sie Folgendes einfach in den Datenabschnitt Ihrer Komponente ein:

const externeVariable = getValue();

Standard exportieren {
  Daten() {
    zurückkehren {
      reaktiveVariable: externeVariable,
    };
  }
};

Wenn Sie die Kompositions- API in Vue 3 verwenden, können Sie ref oder reactive wie folgt verwenden:

importiere { ref } von 'vue';

// Kann vollständig außerhalb einer Vue-Komponente erfolgen const externalVariable = getValue();
const reaktiveVariable = ref(externeVariable);

// Verwenden Sie .value, um auf console.log(reactiveVariable.value) zuzugreifen.

Verwenden Sie stattdessen reaktiv:

importiere { reaktiv } von „vue“;

// Kann vollständig außerhalb einer Vue-Komponente erfolgen const externalVariable = getValue();
// Reactive funktioniert nur mit Objekten und Arrays const anotherReactiveVariable = reactive(externalVariable);

// Direkter Zugriff console.log(anotherReactiveVariable);

Wenn Sie immer noch Vue 2 verwenden (wie viele von uns), können Sie mit observable statt reactive genau dasselbe Ergebnis erzielen.

12. Destrukturierung in v-for

Wussten Sie, dass Sie in v-for destrukturieren können?

<li
  v-for="{ name, id } in Benutzern"
  :Schlüssel="id"
>
  {{ Name }}
</li>

Wie wir alle wissen, können Sie den Index von v-for mithilfe eines Tupels wie folgt ermitteln:

<li v-for="(Wert, Schlüssel) in [
  'Hai Yong',
  'Gefroren',
  „Web-Anfänger“
]">
  {{ index + 1 }} - {{ wert }}
</li>

Beim Benutzen von Objekten können Sie auch die Tasten greifen:

<li v-for="(Wert, Schlüssel) in {
  Name: 'Hai Yong',
  erschienen: 2021,
  Regisseur: 'Ein Blogger',
}">
  {{ Schlüssel }}: {{ Wert }}
</li>

Sie können diese beiden Methoden auch kombinieren, um sowohl den Schlüssel als auch den Index einer Eigenschaft zu erhalten:

<li v-for="(Wert, Schlüssel, Index) in {
  Name: 'Hai Yong',
  erschienen: 2021,
  Regisseur: 'Ein Blogger',
}">
  #{{ index + 1 }}. {{ Schlüssel }}: {{ Wert }}
</li>

13. Schleife über einen Bereich in Vue

Mit der Direktive v-for können wir über ein Array iterieren, aber auch über einen Bereich:

<Vorlage>
  <ul>
    <li v-for="n in 5">Artikelnummer {{ n }}</li>
  </ul>
</Vorlage>

Anzeigeeffekt:

Projekt Nr. 1
Projekt #2
Projekt #3
Projekt #4
Projekt #5

Wenn wir v-for Bereich verwenden, beginnt dieser bei 1 und endet bei der von uns angegebenen Zahl.

14. Beobachten Sie alles in einer Komponente

Die Reaktion Ihrer Komponente kann beobachtet werden:

Standard exportieren {
  berechnet: {
    einigeberechneteEigenschaft() {
      // Berechnungseigenschaften aktualisieren},
  },
  betrachten:
    einigeberechneteEigenschaft() {
      // etwas tun, wenn die berechnete Eigenschaft aktualisiert wird }
  }
};

Sie können sehen:

• Berechnungsstützen
• Requisiten
• Verschachtelte Werte
  

Wenn Sie die Kompositions-API verwenden, können Sie jeden Wert beobachten, solange es sich um ein ref oder reactive Objekt handelt.

15. Gegenstandstyp stehlen

Kopieren Sie prop -Typen aus untergeordneten Komponenten, um sie in übergeordneten Komponenten zu verwenden. Aber diese Requisitentypen zu stehlen ist viel besser, als sie einfach zu kopieren.

Beispielsweise verwenden wir in dieser Komponente eine Symbolkomponente:

<Vorlage>
  <div>
    <h2>{{ Überschrift }}</h2>
    <Symbol
      :Typ="Symboltyp"
      :size="Symbolgröße"
      :Farbe="Symbolfarbe"
    />
  </div>
</Vorlage>

Damit es funktioniert, müssen wir den richtigen Requisitentyp hinzufügen, der aus der Symbolkomponente kopiert wurde:

Symbol aus „./Icon“ importieren;
Standard exportieren {
  Komponenten: { Icon },
  Requisiten: {
    Symboltyp: {
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
    Symbolgröße: {
      Typ: Zeichenfolge,
      Standard: „mittel“,
      Validator: Größe => [
        'klein',
        'Medium',
        'groß',
        'x-groß'
      ].includes(Größe),
    },
    Symbolfarbe:
      Typ: Zeichenfolge,
      Standard: „schwarz“,
    },
    Überschrift:
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
  },
};

Wenn prop Typen der Icon aktualisiert werden, vergessen Sie mit Sicherheit, zu dieser Komponente zurückzukehren und sie zu aktualisieren. Mit der Zeit werden Fehler auftreten, da die prop dieser Komponente beginnen, von prop Requisitentypen in der Icon abzuweichen.

Deshalb stehlen wir sie:

Symbol aus „./Icon“ importieren;
Standard exportieren {
  Komponenten: { Icon },
  Requisiten: {
    ...Icon.Requisiten,
    Überschrift:
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
  },
};

Außer dass wir in unserem Beispiel am Anfang jedes Requisitennamens “icon” hinzugefügt haben, müssen wir ein wenig zusätzliche Arbeit investieren, um dies zu erreichen:

Symbol aus „./Icon“ importieren;

: Konstanten iconProps = {};

// Führen Sie vorher einige Verarbeitungen durch
Objekt.Einträge(Icon.props).fürEach((Schlüssel, Wert) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = Wert;
});

Standard exportieren {
  Komponenten: { Icon },
  Requisiten: {
    ...SymbolProps,
    Überschrift:
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
  },
};

Wenn jetzt der prop -Typ in der Icon geändert wird, wird unsere Komponente auf dem neuesten Stand gehalten.

Was aber passiert, wenn ein prop zur Icon hinzugefügt oder daraus entfernt wird? Um diese Fälle abzudecken, können wir v-bind -berechnete Props verwenden, um die Dinge dynamisch zu halten.

16. Erkennen Sie Klicks außerhalb (oder innerhalb) eines Elements

Manchmal müssen wir erkennen, ob ein Klick innerhalb oder außerhalb eines bestimmten Elements erfolgt ist. Dies ist der Ansatz, den wir normalerweise verwenden:

window.addEventListener('mousedown', e => {
  // Das angeklickte Element abrufen const clickedEl = e.target;

  // `el` ist das Element, auf dem Sie externe Klicks erkennen, wenn (el.contains(clickedEl)) {
    // Klicken Sie in "el" } else {
    // außerhalb von `el` klicken}
});

17. Rekursive Slots

Können wir eine Komponente nur mithilfe einer Vorlage v-for ? Dabei habe ich herausgefunden, wie man slot rekursiv verwendet.

So sieht die Komponente aus:

<!-- VFor.vue -->
<Vorlage>
    <div>
        <!-- Das erste Element rendern-->
    {{ Liste[0] }}
        <!-- Wenn wir über weitere Elemente verfügen, das gerade gerenderte aber beibehalten müssen -->
    <v-für
      v-if="Listenlänge > 1"
            :Liste="Liste.Scheibe(1)"
        />
    </div>
</Vorlage>

Wenn Sie dies mit eingeschränkten Slots tun möchten – warum nicht? ! — Es sind nur ein paar kleine Änderungen nötig: <

Vorlage>
  <div>
    <!-- Übergeben Sie das Element an den Slot, der gerendert werden soll -->
    <slot v-bind:item="Liste[0]">
      <!-- Standard -->
      {{ Liste[0] }}
    </slot>

    <v-für
      v-if="Listenlänge > 1"
      :Liste="Liste.Scheibe(1)"
    >
      <!-- Den Bereichssteckplatz rekursiv weitergeben -->
      <template v-slot="{ Element }">
        <slot v-bind:item="item" />
      </Vorlage>
    </v-für>
  </div>
</Vorlage>

So verwenden Sie diese Komponente:

<Vorlage>
  <div>
    <!-- Allgemeine Liste -->
    <v-für: Liste = "Liste" />

    <!-- Liste mit fettgedruckten Einträgen -->
    <v-für: Liste = "Liste">
      <template v-slot="{ Element }">
        <strong>{{ Artikel }}</strong>
      </Vorlage>
    </v-für>
  </div>
</Vorlage>

18. Komponentenmetadaten

Nicht jede Information, die Sie einer Komponente hinzufügen, ist ein Status. Manchmal müssen Sie Metadaten hinzufügen, um anderen Komponenten weitere Informationen bereitzustellen.

Beispiel: Sie erstellen eine Reihe verschiedener Widgets für ein Analyse-Dashboard wie Google Analytics:

Wenn Ihr Layout wissen soll, wie viele Spalten jedes Widget einnehmen soll, können Sie dies als Metadaten direkt zur Komponente hinzufügen:

Standard exportieren {
  Name: 'LiveUsersWidget',
  // 👇 Fügen Sie es einfach als zusätzliche Eigenschaftsspalten hinzu: 3,
  Requisiten: {
    // ...
  },
  Daten() {
    zurückkehren {
      //...
    };
  },
};

Sie finden diese Metadaten als Eigenschaft der Komponente:

importiere LiveUsersWidget aus „./LiveUsersWidget.vue“;
const { Spalten } = LiveUsersWidget;

Sie können auch innerhalb einer Komponente über die spezielle Eigenschaft $options auf Metadaten zugreifen:

Standard exportieren {
  Name: 'LiveUsersWidget',
  Spalten: 3,
  erstellt() {
    // 👇 „$options“ enthält alle Metadaten für die Komponente console.log(„Using ${this.$options.metadata} columns“);
  },
};

Beachten Sie, dass diese Metadaten für jede Instanz der Komponente gleich sind und nicht reagieren.

Zu den weiteren Verwendungsmöglichkeiten zählen (jedoch ohne darauf beschränkt zu sein):

• Behalten Sie die Versionsnummern aller Komponenten bei
• Benutzerdefinierte Flags für Build-Tools, um Komponenten unterschiedlich zu behandeln
• Fügen Sie Komponenten benutzerdefinierte Funktionen hinzu, die über berechnete Eigenschaften, Daten, Beobachter usw. hinausgehen.

19. Mehrdatei-Einzeldateikomponente

Dies ist eine wenig bekannte Funktion von SFC. Sie können die Datei wie eine normale HTML-Datei importieren:

<!-- "einzelne" Dateikomponente -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

Dies ist praktisch, wenn Sie Stile, Dokumente oder andere Dinge teilen müssen. Auch ideal für besonders lange Komponentendateien, bei denen die Finger beim Scrollen ermüden

20. Wiederverwendbare Komponenten sind nicht das, was Sie denken

Eine wiederverwendbare Komponente muss nichts Großes oder Kompliziertes sein, ich mache oft kleine und kurze Komponenten wiederverwendbar. Da ich diesen Code nicht überall neu schreibe, wird die Aktualisierung viel einfacher und ich kann sicherstellen, dass alle OverflowMenu genau gleich aussehen und funktionieren – weil sie gleich sind!

<!-- OverflowMenu.vue -->
<Vorlage>
  <Menü>
    <!-- Fügen Sie eine benutzerdefinierte Schaltfläche hinzu, um unser Menü auszulösen-->
    <template #button v-slot="binden">
      <!-- Verwenden Sie Bind, um Klickhandler, a11y-Attribute usw. zu übergeben. -->
      <Button v-bind="binden">
        <!-- Verwenden Sie unser eigenes "..."-Symbol, diese Schaltfläche hat keinen Text -->
        <Vorlage #Symbol>
          <svg src="./ellipsis.svg" />
        </Vorlage>
      </Button>
    </Vorlage>
  </Menü>
</Vorlage>

Hier haben wir eine Menu verwendet, aber der Schaltfläche, die das Öffnen auslöst, ein „…“-Symbol (Auslassungspunkte) hinzugefügt. Da es sich nur um wenige Zeilen handelt, lohnt es sich wahrscheinlich nicht, eine wiederverwendbare Komponente daraus zu machen. Können wir das Symbol nicht einfach jedes Mal hinzufügen, wenn wir ein Menü wie dieses verwenden möchten? Aber dieses OverflowMenu wird Dutzende Male verwendet, und wenn wir jetzt das Symbol oder sein Verhalten aktualisieren möchten, können wir das ganz einfach tun. Und es ist auch viel einfacher zu verwenden!

<Vorlage>
  <ÜberlaufMenü
    :menu-items="Artikel"
    @click="MenüKlick handhaben"
  />
</Vorlage>

21. Methoden von außerhalb einer Komponente aufrufen

Sie können die Methode von außerhalb der Komponente aufrufen, indem Sie ihr einen Verweis zuweisen:

<!-- Übergeordnetes Element.vue -->
<Vorlage>
  <ChildComponent ref="Kind" />
</Vorlage>

 
// Irgendwo in Parent.vue this.$refs.child.method();

Normalerweise verwenden wir Requisiten und Ereignisse, um zwischen Komponenten zu kommunizieren. Requisiten werden an untergeordnete Komponenten gesendet und Ereignisse werden an die übergeordnete Komponente zurückgesendet.

<Vorlage>
  <Unterkomponente
    :sag mir, was ich tun soll="einigeAnweisungen"
    @etwas-ist-passiert="hierwerdeichdirdabeihelfen"
  />
</Vorlage>

Manchmal kann es jedoch vorkommen, dass eine übergeordnete Komponente eine Methode in einer untergeordneten Komponente auslösen muss. Hier funktioniert es nicht, die Requisiten einfach weiterzugeben.

Sie können einen Booleschen Wert weitergeben und ihn von der untergeordneten Komponente überwachen lassen:

<!-- Übergeordnetes Element.vue -->
<Vorlage>
  <ChildComponent :trigger="sollteCallMethod" />
</Vorlage>

// Kind.vue
Standard exportieren {
  Requisiten: ['Auslöser'],
  betrachten:
    sollteCallMethod(neuerWert) {
      wenn (neuerWert) {
        // Diese Methode wird aufgerufen, wenn der Trigger auf „true“ gesetzt ist. this.method();
      }
    }
  }
}

Dies funktioniert einwandfrei, jedoch nur beim ersten Anruf. Wenn Sie diese Aktion mehr als einmal auslösen müssen, müssen Sie den Status bereinigen und zurücksetzen. Die Logik sieht dann folgendermaßen aus:

• Parent Komponente übergibt true triggerprop “
• Watch wird ausgelöst, Child Komponente ruft Methode auf
• Child Komponente sendet ein Ereignis, um Parent Komponente mitzuteilen, dass die Methode erfolgreich ausgelöst wurde.
• Parent Komponente setzt trigger wieder auf false zurück, sodass wir dies erneut tun können.
  

Wenn wir stattdessen einen Verweis auf die untergeordnete Komponente festlegen, können wir die Methode direkt aufrufen:

<!-- Übergeordnetes Element.vue -->
<Vorlage>
  <ChildComponent ref="Kind" />
</Vorlage>

// Irgendwo in Parent.vue this.$refs.child.method();

Wir brechen die Regel „ props down, events up “ und brechen die Kapselung, aber es ist klarer, einfacher zu verstehen und es lohnt sich!

Manchmal ist die „beste“ Lösung am Ende die schlechteste Lösung.

22. Arrays und Objekte beobachten

Das Schwierigste an der Verwendung eines Beobachters ist, dass er manchmal nicht richtig ausgelöst wird. Dies passiert normalerweise, weil Sie versuchen, in ein Array oder ein Objekt zu schauen, ohne deep auf true zu setzen:

Standard exportieren {
  Name: 'Farbänderung',
  Requisiten: {
    Farben:
      Typ: Array,
      erforderlich: wahr,
    },
  },
  betrachten:
    // Benutze Objektsyntax statt nur Methoden colors: {
      // Dadurch wird Vue darüber informiert, dass es tief im Array nachsehen muss: true,

      // Wir müssen unsere Methode in das Handlerfeld handler() verschieben
        console.log('Die Farbliste hat sich geändert!');
      }
    }
  }
}

Die Verwendung der reaktiven API von Vue 3 würde folgendermaßen aussehen :

betrachten(
  Farben,
  () => {
    console.log('Die Farbliste hat sich geändert!');
  },
  {
    tief: wahr,
  }
);

Wenn Sie mehr erfahren möchten, können Sie die Dokumentation zu Vue 3 und Vue 2 zu Rate ziehen.

23. Deep Linking mit Vue Router

Sie können (einige) Zustände in der URL speichern, sodass Sie direkt zu einem bestimmten Zustand auf der Seite springen können.

Sie können beispielsweise eine Seite mit einem ausgewählten Datumsbereichsfilter laden:

someurl.com/edit?date-range=last-week

Dies ist nützlich für Teile einer Anwendung, in denen Benutzer möglicherweise eine große Anzahl von Links gemeinsam nutzen, für serverseitig gerenderte Anwendungen oder für die Weitergabe von mehr Informationen zwischen zwei separaten Anwendungen, als ein normaler Link normalerweise bereitstellen würde.

Sie können Filter und Suchwerte speichern, angeben, ob ein Modus ein- oder ausgeschaltet ist oder die Position in einer Liste, zu der wir gescrollt haben – perfekt für unendliches Blättern.

Verwenden Sie vue-router, um die Abfrage wie folgt abzurufen (dies funktioniert auch mit den meisten Vue-Frameworks wie Nuxt und Vuepress):

const dateRange = this.$route.query.dateRange;

Um dies zu ändern, verwenden wir die RouterLink-Komponente und aktualisieren die Abfrage:

<RouterLink :to="{
  Abfrage: {
    Datumsbereich: neuerDatumsbereich
  }
}">

24. Eine weitere Verwendung für Vorlagen-Tags

Das template kann überall innerhalb einer Vorlage verwendet werden, um Ihren Code besser zu organisieren.

Ich verwende es gerne, um die v-if-Logik und manchmal auch v-for zu vereinfachen.

In diesem Beispiel haben wir mehrere Elemente, die alle dieselbe v-if-Bedingung verwenden:

<Vorlage>
  <div Klasse="Karte">
    <img src="imgPfad" />
    <h3>
      {{ Titel }}
    </h3>
    <h4 v-if="erweitert">
      {{ Unterüberschrift }}
    </h4>
    <div v-if="erweitert" class="Karteninhalt">
      <Steckplatz/>
    </div>
    <SocialShare v-if="erweitert" />
  </div>
</Vorlage>

Es ist etwas umständlich und zunächst nicht offensichtlich, da viele dieser Elemente zusammen angezeigt und ausgeblendet werden. Bei größeren, komplexeren Baugruppen kann dies eine weitaus schlimmere Situation sein!

Aber wir können das beheben.

Wir können diese Elemente mithilfe des Vorlagentags gruppieren und das v-if in den Vorlagentag selbst einfügen:

<Vorlage>
  <div Klasse="Karte">
    <img src="imgPfad" />
    <h3>
      {{ Titel }}
    </h3>
    <template v-if="erweitert">
      <h4>
        {{ Unterüberschrift }}
      </h4>
      <div Klasse="Karteninhalt">
        <Steckplatz/>
      </div>
      <SocialShare/>
    </Vorlage>
  </div>
</Vorlage>

25. Eine bessere Möglichkeit, mit Fehlern (und Warnungen) umzugehen

Sie können in Vue benutzerdefinierte Handler für Fehler und Warnungen bereitstellen:

// Ansicht 3
const app = erstelleApp(App);
app.config.errorHandler = (err) => {
  Alarm(Fehler);
};

// Ansicht 2
Vue.config.errorHandler = (err) => {
  Alarm(Fehler);
};

Fehlerverfolgungsdienste wie Bugsnag und Rollbar greifen auf diese Handler zu, um Fehler zu protokollieren. Sie können sie jedoch auch verwenden, um Fehler eleganter zu behandeln und so die Benutzererfahrung zu verbessern.

Wenn beispielsweise ein Fehler nicht behandelt wird, kann die Anwendung nicht nur abstürzen, sondern auch einen ganzseitigen Fehlerbildschirm anzeigen und den Benutzer auffordern, die Seite zu aktualisieren oder eine andere Aktion auszuprobieren.

In Vue 3 beziehen sich Fehlerhandler nur auf Vorlagen- und Watcher-Fehler, aber die Fehlerhandler von Vue 2 fangen fast alles ab. Die Warnungshandler in beiden Versionen sind nur für die Entwicklung vorgesehen.

Damit ist dieser Artikel über 25 Vue-Tipps, die Sie kennen müssen, abgeschlossen. Weitere relevante Vue-Tipps finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!