In den VueJs 2.0-Dokumenten kann ich keine Hooks finden, die props
Änderungen abhören würden.
Hat VueJs solche Haken wie onPropsUpdated()
oder ähnlich?
Aktualisieren
Wie @wostex vorgeschlagen hat, habe ich versucht, watch
mein Eigentum, aber nichts hat sich geändert. Dann wurde mir klar, dass ich einen Sonderfall habe:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
Ich übergebe, myProp
dass die übergeordnete Komponente an die child
Komponente empfängt . Dann watch: {myProp: ...}
funktioniert das nicht.
javascript
vue.js
vuejs2
vue-component
Amio.io
quelle
quelle
Antworten:
Sie können
watch
Requisiten verwenden, um bei Änderungen der Requisiten Code auszuführen:quelle
watch
. Aufgrund Ihres Beispiels habe ich festgestellt, dass mein Fall etwas anders ist. Ich habe meine Frage aktualisiert.Hast du das versucht?
https://vuejs.org/v2/api/#watch
quelle
Er,
In meinem Fall brauchte ich eine Lösung, bei der ich meine Daten immer wieder analysieren musste, wenn sich Requisiten änderten. Ich war es leid, für alle meine Requisiten einen separaten Beobachter zu machen, also benutzte ich Folgendes:
Der wichtigste Punkt, den Sie aus diesem Beispiel entfernen sollten, ist die Verwendung
deep: true
, damit nicht nur $ props, sondern auch verschachtelte Werte wie zprops.myProp
Weitere Informationen zu diesen erweiterten Überwachungsoptionen finden Sie hier: https://vuejs.org/v2/api/#vm-watch
quelle
Sie müssen verstehen, welche Komponentenhierarchie Sie haben und wie Sie Requisiten übergeben. Auf jeden Fall ist Ihr Fall etwas Besonderes und wird von den Entwicklern normalerweise nicht angetroffen.
Wenn myProp in der übergeordneten Komponente geändert wird, wird dies auch in der untergeordneten Komponente angezeigt .
Und wenn myProp in der untergeordneten Komponente geändert wird, wird dies auch in der Enkelkomponente wiedergegeben .
Wenn also myProp in der übergeordneten Komponente geändert wird, wird es in der Enkelkomponente wiedergegeben . (So weit, ist es gut).
Daher müssen Sie in der gesamten Hierarchie nichts tun. Requisiten sind von Natur aus reaktiv.
Ich spreche jetzt davon, in der Hierarchie aufzusteigen
Wenn myProp in der grandChild-Komponente geändert wird , wird es nicht wiedergegeben . Sie müssen den Modifikator .sync in child verwenden und ein Ereignis von der grandChild-Komponente ausgeben.
Wenn myProp in der untergeordneten Komponente geändert wird , wird es nicht in der übergeordneten Komponente wiedergegeben. Sie müssen den Modifikator .sync im übergeordneten Element verwenden und ein Ereignis von der untergeordneten Komponente ausgeben.
Wenn myProp in der grandChild-Komponente geändert wird , wird es (offensichtlich) nicht in der übergeordneten Komponente wiedergegeben. Sie müssen den untergeordneten Modifikator .sync verwenden und ein Ereignis von der Enkelkomponente ausgeben, dann die Requisite in der untergeordneten Komponente beobachten und ein Ereignis bei Änderung ausgeben, das von der übergeordneten Komponente mit dem Modifikator .sync abgehört wird.
Sehen wir uns einen Code an, um Verwirrung zu vermeiden
Parent.vue
Child.vue
Enkelkind
Aber danach werden Sie die schreienden Warnungen des Vue-Sprichworts nicht mehr bemerken
Wie ich bereits erwähnt habe, stoßen die meisten Entwickler nicht auf dieses Problem, da es sich um ein Anti-Pattern handelt. Deshalb erhalten Sie diese Warnung.
Aber um Ihr Problem zu lösen (entsprechend Ihrem Design). Ich glaube, Sie müssen die oben genannten Probleme umgehen (Hack, um ehrlich zu sein). Ich empfehle Ihnen dennoch, Ihr Design zu überdenken und zu machen, ist weniger anfällig für Fehler.
Ich hoffe, es hilft.
quelle
Ich bin mir nicht sicher, ob Sie es gelöst haben (und ob ich es richtig verstehe), aber hier ist meine Idee:
Wenn Eltern myProp empfangen und möchten, dass es an Kind übergeben und in Kind angezeigt wird, muss Eltern über eine Kopie von myProp verfügen (keine Referenz).
Versuche dies:
und in HTML:
Eigentlich muss man sehr vorsichtig sein, wenn man in solchen Situationen an komplexen Sammlungen arbeitet (einige Male weitergegeben).
quelle
Für die bidirektionale Bindung müssen Sie den Modifikator .sync verwenden
mehr Details...
und Sie müssen die watch-Eigenschaft in der untergeordneten Komponente verwenden, um Änderungen abzuhören und zu aktualisieren
quelle
Ich arbeite mit einer berechneten Eigenschaft wie:
Resources ist in diesem Fall eine Eigenschaft:
quelle
Für mich ist dies eine höfliche Lösung, um bestimmte Requisitenänderungen zu erhalten und damit Logik zu erstellen
Ich würde
props
und Variablencomputed
Eigenschaften verwenden, um Logik zu erstellen, nachdem die Änderungen empfangen wurdenWir könnten also _objectDetail für HTML-Rendering verwenden
oder in irgendeiner Methode:
quelle
Sie können den Überwachungsmodus verwenden, um Änderungen zu erkennen:
Mach alles auf atomarer Ebene. Überprüfen Sie also zuerst, ob die Überwachungsmethode selbst aufgerufen wird oder nicht, indem Sie etwas im Inneren trösten. Sobald festgestellt wurde, dass die Uhr aufgerufen wird, zerschlagen Sie sie mit Ihrer Geschäftslogik.
quelle
Ich verwende Eigenschaften
props
und Variablen,computed
wenn ich nachher Logik erstellen muss, um die Änderungen zu erhaltenquelle
Wenn myProp ein Objekt ist, kann es normalerweise nicht geändert werden. Die Uhr wird also niemals ausgelöst. Der Grund, warum myProp nicht geändert wird, ist, dass Sie in den meisten Fällen nur einige Schlüssel von myProp festlegen. Der myProp selbst ist immer noch derjenige. Versuchen Sie, Requisiten von myProp wie "myProp.a" anzusehen, es sollte funktionieren.
quelle
Die Überwachungsfunktion sollte in der untergeordneten Komponente platziert werden. Nicht Eltern.
quelle
@ JoeSchr hat eine gute Antwort. Hier ist eine andere Möglichkeit, dies zu tun, wenn Sie nicht "tief: wahr" wollen.
quelle