Tipps zur Verwendung von Provide und Inject zum Übergeben von Methoden und Ereignissen über Komponenten in Vue

Vue ist ein hervorragendes Open-Source-Frontend-Framework. Es bietet die Möglichkeit, schnell Benutzeroberflächen zu erstellen, den Entwicklungsprozess zu vereinfachen und die Effizienz der Produktentwicklung zu verbessern. Vue bietet eine Vielzahl von Möglichkeiten zur Datenübergabe, darunter Props, Emit, $emit, Vuex usw. Die Verwendung von Provide und Inject auf Komponentenebene ist eine flexiblere Möglichkeit, die uns dabei helfen kann, Methoden und Ereignisse komponentenübergreifend weiterzugeben. In diesem Artikel konzentrieren wir uns auf die Erläuterung der Techniken zur Verwendung von Provide und Inject in Vue, um Methoden und Ereignisse komponentenübergreifend zu übergeben.

1. Was sind „Versorgen“ und „Injizieren“?

provide und inject sind erweiterte Komponentenbereitstellungsmethoden in Vue, die es übergeordneten Komponenten ermöglichen, Daten an untergeordnete Komponenten weiterzugeben, die weit von ihnen entfernt sind. Wir können Daten für alle Nachkommenkomponenten zugänglich machen, indem wir sie in der Vorgängerkomponente bereitstellen.

2. Wie verwende ich Provide und Inject?

Lassen Sie uns zunächst anhand des Beispiels der Bindung derselben Methode an mehrere Komponenten erklären, wie Provide und Inject verwendet werden.

2.1 Vorgängerkomponenten stellen Methoden bereit

In Vorgängerkomponenten definieren wir eine Methode und stellen sie allen Nachkommenkomponenten zur Verfügung. Der Code lautet wie folgt:

import { provide } from 'vue'

export default {
  created() {
    const commonMethod = () => { alert('hello world') }
    provide('commonMethod', commonMethod)
  }
}

Hier verwenden wir die Provide-Methode, um allen Nachkommenkomponenten die commonMethod-Methode bereitzustellen. Der erste Parameter der Bereitstellungsmethode ist der Schlüsselname der bereitgestellten Daten und der zweite Parameter ist der spezifische Inhalt der bereitgestellten Daten.

2.2 Nachkommenkomponenten erhalten Methoden

Nachdem wir die bereitgestellte Methode erhalten haben, können wir sie in allen Nachkommenkomponenten verwenden. Der Code lautet wie folgt:

import { inject } from 'vue'

export default {
  created() {
    const commonMethod = inject('commonMethod')
    this.$commonMethod = commonMethod
  }
}

Hier verwenden wir die Inject-Methode, um die CommonMethod-Methode zu erhalten. Der Parameter der Injektionsmethode ist der Schlüsselname der bereitgestellten Daten und gibt den Wert der bereitgestellten Daten zurück. Im erstellten Lebenszyklus binden wir die commonMethod-Methode in die Variable $commonMethod der Instanz zur Verwendung in der Komponente.

3. Wie setzt man Passing-Events um?

Bei der komponentenübergreifenden Bereitstellung von Ereignissen müssen wir Provide und Inject verwenden. Im Folgenden nehmen wir als Beispiel das Ereignis, bei dem auf eine Schaltfläche geklickt wird, um eine untergeordnete Komponente auszulösen.

3.1 Vorfahrenkomponenten stellen Ereignisse bereit

In der Vorfahrenkomponente führen wir eine Ereignisklasse ein und stellen sie allen Nachkommenkomponenten zur Verfügung. Der Code lautet wie folgt:

import { provide } from 'vue'
import { EventEmitter } from 'events'

export default {
  created() {
    const emitter = new EventEmitter()
    provide('emitter', emitter)
  }
}

Hier erstellen wir eine neue EventEmitter-Instanz in der Vorgängerkomponente und stellen sie der Nachkommenkomponente zur Verfügung.

3.2 Nachkommende Komponenten hören auf Ereignisse.

In der nachkommenden Komponente verwenden wir die Injektionsmethode, um das bereitgestellte Ereignis abzurufen und es abzuhören, damit die entsprechende Logik ausgeführt werden kann, nachdem das Ereignis ausgelöst wurde. Der Code lautet wie folgt:

import { inject } from 'vue'

export default {
  created() {
    const emitter = inject('emitter')
    emitter.on('event', () => {
      console.log('emit event')
    })
  }
}

Hier verwenden wir die Injektionsmethode, um den bereitgestellten Ereignisemitter zu empfangen und das Ereignis „Ereignis“ im erstellten Lebenszyklus abzuhören. Wenn das Ereignis ausgelöst wird, führen wir die entsprechende Logik aus.

3.3 Auslösen von Ereignissen

Beim Auslösen eines Ereignisses müssen wir den Emitter holen und ihn auslösen. Der Code lautet wie folgt:

import { inject } from 'vue'

export default {
  methods: {
    emitEvent() {
      const emitter = inject('emitter')
      emitter.emit('event')
    }
  }
}

Hier haben wir die inject-Methode verwendet, um den bereitgestellten Ereignisemitter abzurufen, und das Ereignis „event“ in der emitEvent-Methode ausgelöst.

4. Zusammenfassung

In der Einleitung dieses Artikels haben wir gelernt, wie wir Provide und Inject verwenden, um die komponentenübergreifende Bereitstellung von Methoden und Ereignissen zu implementieren. Durch die Verwendung von Provide und Inject auf der Komponentenebene von Vue können wir Daten und Ereignisse flexibler weitergeben und so die Komplexität von Vorlagen oder Requisiten effektiv reduzieren. Gleichzeitig bieten Provide und Inject auch ähnliche Funktionen wie DI (Dependency Injection), wodurch das Architekturdesign von Vue skalierbarer und wartbarer wird.

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von Provide und Inject zum Übergeben von Methoden und Ereignissen über Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!