Vue.js unter der Lupe, Teil 1: Komponentenkommunikation

Vue.js unter der Lupe: Kommunikation zwischen Komponenten
Keine Kommentare

Nach unserem Einführungstutorial zu Vue.js geht’s jetzt ans Eingemachte: Vue.js im Detail betrachtet. Das JavaScript-Framework bringt zahlreiche Features mit, auf die sich ein genauerer Blick lohnt. Heute im Fokus: Wie man Komponenten miteinander kommunizieren lässt.

Wie man Komponenten in Vue.js-Applikationen miteinander kommunizieren lässt:

  • Props
  • Child-Parent-Kommunikation durch Events
  • Kommunikation zwischen jeglichen Komponentenarten via Event Bus
  • Alternativen

In Vue können die Komponenten auf verschiedenste Art und Weise miteinander kommunizieren.

Props

Eine Möglichkeit ist die Verwendung von Props.

Parents „übergeben“ Daten, indem Argumente zu der Komponentendeklaration hinzugefügt werden:

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script>
import Car from './components/Car'

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

Diese Properties funktioniert nur in eine Richtung: von Parent zu Child. Immer wenn das Prop im Parent geändert wird, wird er an das Child gesendet und neu gerendert.

Umgekehrt ist das nicht der Fall, weswegen man ein Property niemals in den Child-Komponenten verändern sollte.

Child-Parent-Kommunikation durch Events

Events ermöglichen die Kommunikation von Child zu Parent.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

Im Parent kann dies mittels v-on abgefangen werden, sofern die Komponente in das Template mit aufgenommen wird.

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function() {
      //...
    }
  }
}
</script>

Natürlich können auch Parameter übergeben werden:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

… und aus dem Parent ausgelesen werden.

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function(param1, param2) {
      //...
    }
  }
}
</script>

Kommunikation zwischen jeglichen Komponentenarten via Event Bus

Durch Events ist man nicht an Child-Parent-Beziehungen gebunden: Man nutzt dafür den sogenannten Event Bus.

Im vorangegangenen Beispiel haben wir this.$emit verwendet, um ein Event an die Komponenteninstanz zu senden. Stattdessen können wir das Event allerdings auch an grundsätzlich zugänglichere Komponenten versenden. Für gewöhnlich nutzt man dafür this.$root, die Root-Komponente.

Auf der anderen Seite kann man allerdings auch eine Vue-Kompoente eigens dafür programmieren und bei Bedarf importieren.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

Andere Komponenten können durch den mounted-Callback entsprechend angesprochen werden:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

Alternativen

Die genannten Beispiele zeigen, was Vue grundsätzlich mitbringt. Für anderweitige Möglichkeiten lohnt der Blick in Vuex oder in Drittanbieterbibliotheke, die in den folgenden Teilen der Serie vorgestellt werden.


Dieser Artikel erschien zuerst im Vue Handbook von Flavio Copes.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -