Betrachten Sie eine VueJS-App, mit der Blogposts angezeigt / bearbeitet werden können.
prop an die Modal-Komponente. data -Objekt in der Modal-Komponente, das als Modell zum Auffüllen der Formularfelder dient, und umgekehrt aktualisiert wird, wenn der Benutzer die Formularfelder ändert. Das Problem: Wie verbinde ich den Blogpost, der als prop übergeben wurde, mit dem data -Feld der Modal-Komponente:
Wie lautet der richtige Vue-Weg, um dies zu erreichen?
Sie haben drei (mindestens) Möglichkeiten, dies zu tun:
1) Verbinden Sie die Daten über das Attribut prop , so wie Sie es tun, aber fügen Sie das Attribut .sync hinzu. Wenn die Daten auf dem Formular geändert werden, wird auf diese Weise automatisch auch die Komponente geändert. Das Problem bei dieser Lösung ist, dass das Update automatisch erfolgt. Wenn also eine Validierung fehlschlägt oder der Benutzer das Modal schließt, ohne die Änderungen zu speichern, werden diese trotzdem gespeichert. Ein Beispiel: Ссылка
2) Die andere Möglichkeit besteht darin, das modale zu $dispatch ein Ereignis mit den gespeicherten Informationen zu bekommen, wenn es gespeichert wird. Das Blogpost-Element sollte auf dieses Ereignis achten und entsprechend handeln.
Auf dem Modal:
%Vor%Auf dem Blogpost:
%Vor% Wenn sich die Blogpost-Komponente und die modale Komponente nicht in derselben Hierarchie befinden, werden die Dinge ein wenig komplizierter, und wahrscheinlich benötigen Sie das gemeinsame Elternelement als Proxy. Denken Sie an das modal element dispatching die Information nach oben, das #app Element fängt es über $on und dann $broadcast an das blogpost Element.
3) Verwenden Sie etwas wie vuex , um als zentrales Repository des Staates zu fungieren. Ich weiß nicht, wie groß deine Bewerbung ist, aber das wäre der sauberste Weg: Ссылка
Viel Glück!
Tags und Links javascript vue.js