Aus dem Kurs: Vue.js Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Solution: Komponente erstellen

Solution: Komponente erstellen – Tutorial zu Vue.js

Aus dem Kurs: Vue.js Grundkurs

Gratismonat starten Für Ihr Team erwerben

Solution: Komponente erstellen

“

Hat es funktioniert, die Komponente zu erstellen? Schauen wir uns kurz noch einmal an, worum es geht. In der To-do-Liste gibt es diesen Code, um die Liste an Tasks auszugeben. Und dieser Code soll ausgelagert werden in eine eigene Komponente, sodass man nur schreiben muss task-list. Man braucht dabei natürlich Props und Custom Events. Die Lösung sieht folgendermaßen aus: Da verwende ich nun die Komponente task-list und die erhält übergeben die Tasks und außerdem gibt es ein Custom Event, was ich @remove genannt habe, was dann in dieser Komponente, also in der App, deleteTask aufruft. Das gibt es hier unten, deleteTask. Dann definiere ich das Template für meine Komponente mit der id="task-list-template". Und da habe ich den Code, den ich vorher in der Hauptkomponente hatte, reinkopiert. Was muss ich aber ändern? Ja, ich muss was ändern bei diesem Button zum Löschen. Da gebe ich nun an $emit() und 'remove', das ist dieser Name des Custom Event, und ich übergebe den Index des Elements…

Inhalt