Props und Custom Events in Vue

Das JavaScript-Framework Vue.js, Teil 5 Props und Custom Events in Vue

11.04.2022 Von Dr. Dirk Koller |

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Alle Komponenten einer Vue-Anwendung müssen Daten austauschen können. Wie diese Kommunikation über so genannte Properties und Events realisiert wird, schauen wir uns in diesem Teil der Vue.js-Reihe an.

Mithilfe von props und events wird der Datenaustausch zwischen verschiedenen Vue-App-Komponenten gewährleistet.
(Bild: vueschool.io)

Eine Vue-Anwendung wird verschiedene Komponenten mit jeweils eigener Logik und eigenem User Interface aufgeteilt. So bleibt der Code übersichtlich, wiederverwendbar und wartbar. Allerdings bringt das auch ein neues Problem mit sich: Jede Komponente verfügt über eigene Daten.

Um sich bei Datenänderungen gegenseitig auf dem aktuellen Stand zu halten, müssen die Komponenten miteinander kommunizieren. Diese Kommunikation kann in zwei Richtungen erfolgen: von der umgebenden Parent-Komponente in die Child-Komponente und bei wichtigen Datenänderungen in der Child-Komponente auch in umgekehrter Richtung.

Vom Parent zum Child: Props

Als Beispiel betrachten wir hier zunächst eine einfache Komponente, die einen Text mithilfe von String Interpolation darstellt. Sie wird von der umgebenden Komponente, einer View oder einer anderen Komponente eingebunden und soll beim Anlegen einen Wert von der Parent- Komponente übergeben bekommen. Dies geschieht mit Hilfe sogenannter Props (kurz für Properties).

Das folgende Codestück demonstriert das am Beispiel der Komponente MyComponent, die die Prop aprop vom Typ String enthält. Die Definition der Prop erfolgt im Options-Objekt unter dem Schlüssel props. Nur hier aufgeführte Props können übergeben werden:

<template>
  <div>
    <h1>{{ aprop }}</h1>
  </div>
</template>

<script>

export default {
  name: 'MyComponent',
  props: {
    aprop: String
  }
}
</script>

Der Wert der Prop wird in der Parent-Komponente durch Setzen eines entsprechenden Attributs in dem Tag, das die Komponente repräsentiert, gesetzt:

<template>
  <div id="app">
    <MyComponent aprop="Ein Wert"/>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

Bei dem String „Ein Wert“ handelt es sich um einen statischen Wert, es lassen sich aber auch dynamische Daten mitteilen. Ihnen wird bei der Übergabe ein Doppelpunkt vorangestellt.

Im folgenden Beispiel wird der Child-Komponente die Variable parentData übergeben. Initial enthält sie den String „Ein Wert vom Parent“. Beim Klick auf den Button wird der Wert in der Parent-Komponente geändert, was dann auch für die Prop in der Child-Komponente der Fall ist:

<template>
  <div id="app">
    <button v-on:click="parentData='Ein anderer Wert'">Wert ändern</button>
    <MyComponent :aprop="parentData"/>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data: function () {
    return {
      parentData: "Ein Wert vom Parent"
    }
  }
}
</script>

Die Kommunikation über Props funktioniert nur in eine Richtung, von der Parent- zur Child-Komponente. Das ist bewusst so konzipiert, Komponenten haben ihren eigenen Scope und eine Child-Komponente sollte die Daten des Parents nicht direkt manipulieren. Wird also hier die Prop aprop in der Child-Komponente geändert, dann bekommt die Parent-Komponente diese Änderung nicht mit, die Variable parentData wird nicht überschrieben.

Und zurück: Custom Events

Glücklicherweise bietet Vue aber auch eine Lösung für den umgekehrten Weg. Dazu dienen Events. Das Ereignis wird in diesem Fall von der Child-Komponente ausgelöst und von der Parent-Komponente „gefangen“. Die Parent-Komponente kann also selber entscheiden, ob sie auf die Datenänderung reagiert. Die Methode zum Auslösen des Ereignisses lautet emit:

<template>
  <div>
    <button v-on:click="emitCustomEvent()">Feuere Event</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    emitCustomEvent: function() {
      this.$emit("event-emitted");
    }
  }
}
</script>

Der erste Parameter von emit ist der Name des Events, hier lautet er event-emitted. Damit die umgebende Komponente das Ereignis registriert, muss diese auf Events mit passendem Namen lauschen. Das geschieht durch Einrichten eines Listeners mit der v-on-Direktive:

<template>
  <div id="app">
    <MyComponent v-on:event-emitted="handleEvent()"></MyComponent>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  methods: {
    handleEvent: function() {
      console.log('Event received');
    }
  }
}
</script>

Die v-on-Direktive lässt sich in Vue übrigens durch ein @-Zeichen ersetzen, das macht den Code etwas lesbarer:

<MyComponent @event-emitted="handleEvent()"></MyComponent>

Einfache Ereignisse (Kunde zugefügt, Datum erfasst) lassen sich auf diese Weise der umhüllenden Komponente mitteilen. Oft ist es aber erforderlich, einen Wert zu übergeben (Welcher Kunde? Welches Datum?). Dazu lassen sich der emit-Funktion weitere Parameter mitgeben:

this.$emit("event-emitted", { firstname: 'Max', lastname: 'Mustermann'});

Der Zugriff auf die Werte erfolgt über die spezielle Event-Variable $event, die der aufgerufenen Methode als Parameter übergeben wird:

<template>
  <div id="app">
    <MyComponent @event-emitted="handleEvent($event)"></MyComponent>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  methods: {
    handleEvent: function(customer) {
      console.log('Event received: ' + customer.firstname + " " + customer.lastname);
    }
  }
}
</script>

Mit Props und Custom Events bietet Vue leistungsfähige Kommunikationsmechanismen für Komponenten. Dennoch gibt es in größeren Anwendungen Fälle, bei denen es sinnvoll ist, wenn die Komponenten ohne Kommunikation einfach auf einen gemeinsamen Satz an Daten zugreifen. Diese Idee eines zentralen Stores wird in einem der folgenden Artikel vorgestellt.

(ID:48026271)

Merkliste

Das JavaScript-Framework Vue.js, Teil 5 Props und Custom Events in Vue

Vom Parent zum Child: Props

Und zurück: Custom Events

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Einwilligung in die Verwendung von Daten zu Werbezwecken

Karrierechancen