Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Einführung

Vue 3 führt die Composition API ein, die der Komponentenkommunikation neue Flexibilität und Leistungsfähigkeit verleiht.

Grundlagen der Komponentenkommunikation

Definition und Funktion von Komponenten

Bei der Frontend-Entwicklung kann man sich Komponenten als unabhängige Einheiten vorstellen, die eine Benutzeroberfläche bilden. Es umfasst spezifische Funktionen und Stile, kann wiederverwendet werden und kann unabhängig von anderen Teilen entwickelt und getestet werden. Die Hauptfunktion von Komponenten besteht darin, die Wiederverwendbarkeit, Wartbarkeit und Skalierbarkeit von Code zu verbessern. Durch die Aufteilung der Schnittstelle in mehrere Komponenten können Entwickler komplexe Anwendungen einfacher verwalten und jede Komponente kann optimiert werden, um die Gesamtentwicklungseffizienz und Anwendungsleistung zu verbessern.

Komponentenbaum und Eltern-Kind-Komponentenbeziehung

In Front-End-Frameworks wie Vue.js können Komponenten verschachtelt werden, um einen Komponentenbaum zu bilden. In dieser Baumstruktur kann jede Komponente Unterkomponenten haben, und diese Unterkomponenten können ihre eigenen Unterkomponenten haben, wodurch eine hierarchische Struktur entsteht. Diese Struktur macht die Beziehung zwischen den Komponenten klar und erleichtert die Verwaltung und Wartung.

• Beziehung zwischen Eltern-Kind-Komponenten : Im Komponentenbaum kann eine Komponente eine andere Komponente erstellen. In diesem Fall wird der Ersteller als übergeordnete Komponente und die erstellte Komponente als untergeordnete Komponente bezeichnet. Übergeordnete Komponenten können Daten und Methoden an untergeordnete Komponenten übergeben, und untergeordnete Komponenten können über Ereignisse Informationen an übergeordnete Komponenten senden. Diese Eltern-Kind-Beziehung ist die Grundlage für die Komponentenkommunikation.
• Geschwisterkomponentenbeziehung : Mehrere untergeordnete Komponenten unter derselben übergeordneten Komponente sind Geschwisterkomponentenbeziehungen. Geschwisterkomponenten können nicht direkt miteinander kommunizieren und die Kommunikation zwischen ihnen muss normalerweise über die übergeordnete Komponente weitergeleitet werden.
• Beziehungen zwischen Vorfahren- und Nachkommenkomponenten : Im Komponentenbaum ist die übergeordnete Komponente der übergeordneten Komponente die Vorgängerkomponente und die untergeordnete Komponente der untergeordneten Komponente ist die untergeordnete Komponente. Diese Beziehung ist besonders wichtig, wenn es um tief verschachtelte Komponenten geht.

Die Konzepte von Komponentenbäumen und Eltern-Kind-Komponentenbeziehungen sind für das Verständnis der Komponentenkommunikation von entscheidender Bedeutung. Die Beherrschung dieser Grundkenntnisse kann Entwicklern dabei helfen, Kommunikationsmechanismen zwischen Komponenten effektiver zu entwerfen und zu implementieren.

Eltern-Kind-Komponentenkommunikation (Vue 3)

Eltern übergibt Daten an Kind (Requisiten)

Was sind Requisiten?
Requisiten sind ein Mechanismus für übergeordnete Komponenten, um Daten an untergeordnete Komponenten zu übergeben.Verwenden Sie in Vue 3definePropsDie API wird zum Deklarieren empfangender Requisiten verwendet, wodurch der unidirektionale Datenfluss aufrechterhalten und die Unabhängigkeit und Wiederverwendbarkeit von Komponenten sichergestellt wird.

So übergeben Sie Requisiten in der übergeordneten Komponente
Verwenden Sie in der Vorlage der übergeordneten Komponentev-bindoder Abkürzung:So binden Sie Daten:

<template>
   <ChildComponent :my-prop="parentData" />
</template>

Hier,:my-propZeigt an, dass es sich um eine dynamisch gebundene Requisite handelt.parentDataSind die in der übergeordneten Komponente definierten Daten。

So erhalten Sie Requisiten in der untergeordneten Komponente
Verwenden Sie in der untergeordneten KomponentedefinePropsSo deklarieren Sie die erhaltenen Requisiten:

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

existieren<script setup>Im syntaktischen Zucker,definePropsStellt Requisiten automatisch als responsive Eigenschaften der Komponente bereit。

Kind übergibt Ereignis an Eltern (Emit)

was ist emittieren
Emit ist ein Mechanismus für untergeordnete Komponenten, um Nachrichten an übergeordnete Komponenten zu senden.Verwenden Sie in Vue 3defineEmitsAPI zum Deklarieren von Ereignissen, die ausgegeben und verwendet werden könnenemitFunktion zum Auslösen von Ereignissen.

So lösen Sie ein Ereignis in einer untergeordneten Komponente aus
Verwenden Sie in der Methode der untergeordneten Komponente defineEmits um Ereignisse zu deklarieren, die ausgegeben und verwendet werden können emit auslösen:

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitswird verwendet, um Ereignisse zu deklarieren, die eine Komponente ausgeben kann, whileemitUm diese Ereignisse auszulösen, werden Funktionen verwendet.

So hören Sie auf Ereignisse der untergeordneten Komponente in der übergeordneten Komponente
In der Vorlage der übergeordneten Komponenteverwendenv-onoder Abkürzung@ So lauschen Sie auf Ereignisse, die von untergeordneten Komponenten ausgegeben werden:

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

Hier,@my-eventZeigt an, dass die hörende Unterkomponente etwas ausgibtmy-eventEreignis,handleEventEs handelt sich um eine in der übergeordneten Komponente definierte Methode. Wenn das Ereignis ausgelöst wird, wird diese Methode aufgerufen.

Umfangreiches Beispiel

Angenommen, es gibt eine übergeordnete KomponenteParentComponentund eine UnterkomponenteChildComponent, die übergeordnete Komponente muss Daten an die untergeordnete Komponente übergeben und die untergeordnete Komponente muss die übergeordnete Komponente nach einem bestimmten Vorgang benachrichtigen.

übergeordnete KomponenteParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

UnterbaugruppeChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

In diesem Beispiel wird die übergeordnete Komponente bestanden:my-propÜbergeben Sie Daten an untergeordnete Komponenten und übergeben Sie sie@child-event Hören Sie auf Ereignisse, die von untergeordneten Komponenten ausgegeben werden.untergeordnete Komponente durchläuftdefinePropsEmpfängt den von der übergeordneten Komponente übergebenen InhaltmyProp, und verwenden Sie es im Button-Click-EreignisemitDaten an die übergeordnete Komponente senden.

Verwendung von Pinia (Staatsverwaltungsbibliothek für Vue 3)

Die Vorteile und Funktionen von Pinia

Pinia ist die offiziell empfohlene Statusverwaltungsbibliothek für Vue 3. Sie bietet eine komponentenbasierte Möglichkeit, den Anwendungsstatus zu verwalten. Hier sind einige der wichtigsten Vorteile und Funktionen von Pinia:

• Komponenten-API: Pinia übernimmt eine komponentenbasierte API, wodurch die Trennung von Statusverwaltung und Komponentenlogik natürlicher wird.
• TypeScript-Unterstützung: Pinia hat von Anfang an die TypeScript-Unterstützung in Betracht gezogen, um eine bessere Typinferenz und Editorunterstützung bei der Entwicklung mit TypeScript zu ermöglichen.
• Modular: Mit Pinia können Sie den Status in mehrere Stores aufteilen, und jeder Store kann seinen eigenen Status und seine eigene Logik unabhängig verwalten.
• Composite-API-kompatibel: Pinia ist perfekt in die Composition API von Vue 3 integriert, wodurch die Trennung von Statusverwaltung und Komponentenlogik natürlicher wird.
• Debuggen von Zeitreisen: Pinia bietet Zeitreise-Debugging-Funktionen, die es Entwicklern ermöglichen, Zustandsänderungen einfach zurückzuverfolgen und zu überprüfen.

So richten Sie Pinia ein und verwenden es

Um Pinia nutzen zu können, müssen Sie zunächst Pinia installieren:

npm install pinia

Oder verwenden Sie Garn:

yarn add pinia

Anschließend richten Sie Pinia in Ihrer Vue-Anwendung ein:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

Erstellen Sie einen Shop:

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

Store-in-Komponente verwenden:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Pinia-Integration mit Komponenten

Die Integration von Pinia in Komponenten ist sehr einfach, hauptsächlich durchdefineStore Funktion zum Erstellen eines Shops. In Komponenten können Sie den Status und die Methoden direkt im Store verwenden:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

Im obigen Beispiel greifen wir direkt in die Vorlage zucountum den Zählerwert anzuzeigen und ihn im Schaltflächenklickereignis aufzurufenincrementMethode zum Erhöhen des Zählerwerts.

Vue 3 einzigartige Kommunikationsmethode

Bereitstellen/Injizieren

Grundlegende Verwendung von Provide/Inject
In Vue 3,provideUndinjectDabei handelt es sich um eine Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten, die es einer Vorgängerkomponente ermöglicht, eine Abhängigkeit in alle ihre Nachkommenkomponenten einzufügen, unabhängig davon, wie tief die Komponentenhierarchie ist.

• Daten bereitstellen: Verwendung der VorgängerkomponenteprovideFunktionen stellen Daten bereit.
• Daten einspeisen: Wird von untergeordneten Komponenten verwendetinjectFunktion fügt Daten ein.

Anwendbare Szenarien für Provide/Inject
provideUndinjectAnwendbar auf die folgenden Szenarien:

• Wenn Sie vermeiden möchten, mehrere Schichten zu durchlaufenpropsbei der Datenübergabe.
• Wenn Sie möchten, dass mehrere Komponenten im Komponentenbaum Daten gemeinsam nutzen.

Beispielcode：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Teleport

Das Konzept und die Verwendung von Teleport
TeleportEs handelt sich um eine neue integrierte Komponente, die in Vue 3 hinzugefügt wurde und es Ihnen ermöglicht, einen Teil der Vorlage innerhalb einer Komponente an jeden anderen Ort im DOM zu „übertragen“.

So verwenden Sie Teleport für die Komponentenkommunikation
Teleport Es dient nicht der Kommunikation zwischen Komponenten, sondern der Steuerung der Renderposition von Komponenten.aber du kannst es verwendenTeleportEine besondere Kommunikationsmethode wird durch das Rendern von Teilen einer Komponente im DOM der übergeordneten Komponente erreicht.

Beispielcode：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

Kompositions-API

Einführung in die Kompositions-API
Vue 3 führt die Composition API ein, die eine neue Möglichkeit zum Organisieren und Wiederverwenden von Logik bietet.passierensetupMithilfe von Funktionen können Entwickler den Reaktionszustand und den Lebenszyklus von Komponenten flexibler steuern.

Verwenden Sie ref und reactive für die Kommunikation zwischen Komponenten
refUndreactiveEs handelt sich um ein Tool in der Composition API zum Erstellen responsiver Daten.

• refReaktive Referenzen zum Erstellen grundlegender Datentypen.
• reactiveReaktive Referenz zum Erstellen von Objekttypen.

Verwenden von Provide und Inject in der Composition API
In der Kompositions-APIprovideUndinjectzulässigsetupWird in Funktionen verwendet, um eine komponentenübergreifende Kommunikation zu erreichen.

Beispielcode：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Durch diese einzigartigen Kommunikationsmethoden von Vue 3 können Entwickler die Kommunikation zwischen Komponenten flexibler organisieren und die Wartbarkeit und Wiederverwendbarkeit von Code verbessern.

Zusammenfassen

Vue 3 führt die Composition API ein, die der Komponentenkommunikation neue Flexibilität und leistungsstarke Funktionen verleiht. Die Komponentenkommunikation ist der Schlüssel zum Aufbau komplexer Benutzeroberflächen in der Front-End-Entwicklung. Sie umfasst die Datenübertragung und Ereignisauslösung zwischen übergeordneten und untergeordneten Komponenten, Geschwisterkomponenten sowie Vorfahren- und Nachkommenkomponenten. Vue 3 bietet eine Vielzahl von Kommunikationsmethoden, darunter traditionelle Props und Emit, sowie die neue Provide/Inject-, Teleport- und Composition-API.

Empfohlene verwandte Informationen

• Offizielle Dokumentation zu Vue 3：Vue.js – Das progressive JavaScript-Framework | Vue.js– Die offizielle Dokumentation ist die maßgeblichste Ressource zum Erlernen von Vue 3, einschließlich detaillierter Anleitungen und API-Referenzen.
• Vue.js 3 Composition API-Tutorial：Häufig gestellte Fragen zur Composition API |- Offizielles Composition API-Tutorial, das Ihnen den schnellen Einstieg erleichtert.
• Offizielle Pinia-Dokumentation：Pinia | Der intuitive Store für Vue.js- Wenn Sie Pinia für die Staatsverwaltung verwenden möchten, ist die offizielle Dokumentation von Pinia die beste Lernressource.
• Vue.js-Technologie enthüllt：Vorwort |. Vue.js Technologie enthüllt– Dies ist ein Projekt, das den internen Mechanismus von Vue.js eingehend analysiert und dabei hilft, die Funktionsweise von Vue zu verstehen.

Die Erstellung ist nicht einfach. Wenn Ihnen dieser Artikel hilft, können Sie mir ein „Gefällt mir“ geben?