w VueJs 2.0 nie mogę znaleźć żadnych haków, które mogłyby nasłuchiwać props
zmian.
Czy VueJ ma takie haki? onPropsUpdated()
lub podobne?
Aktualizacja
Jak sugerował @wostex, próbowałem watch
mojej własności, ale nic się nie zmieniło. Potem zdałem sobie sprawę, że mam specjalny przypadek:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
Podaję, myProp
że składnik nadrzędny odbiera child
składnik. To watch: {myProp: ...}
nie działa.
javascript
vue.js
vuejs2
vue-component
Amio.io
źródło
źródło
Odpowiedzi:
Możesz
watch
rekwizyty wykonać kod po zmianach rekwizytów:źródło
watch
. Dzięki twojemu przykładowi zrozumiałem, że moja sprawa jest trochę inna. Zaktualizowałem swoje pytanie.Próbowałeś tego?
https://vuejs.org/v2/api/#watch
źródło
On,
w moim przypadku potrzebowałem rozwiązania, w którym za każdym razem zmieniałyby się rekwizyty, musiałem ponownie przeanalizować moje dane. Byłem zmęczony robieniem osobnego obserwatora dla wszystkich moich rekwizytów, więc użyłem tego:
Kluczowym punktem, który należy odnieść od tego przykładu, jest użycie
deep: true
więc nie tylko ogląda rekwizyty $, ale także zagnieżdżone wartości, takie jak npprops.myProp
Możesz dowiedzieć się więcej o tej rozszerzonej opcji oglądania tutaj: https://vuejs.org/v2/api/#vm-watch
źródło
Musisz zrozumieć, jaką masz hierarchię komponentów i sposób przekazywania rekwizytów, na pewno twoja sprawa jest wyjątkowa i zwykle nie spotykana przez programistów.
Jeśli myProp zostanie zmieniony w komponencie nadrzędnym, zostanie to odzwierciedlone w komponencie podrzędnym.
A jeśli myProp zostanie zmieniony w komponencie potomnym, zostanie to odzwierciedlone w komponencie wnuka.
Jeśli więc myProp zostanie zmieniony w komponencie nadrzędnym, zostanie to odzwierciedlone w komponencie wnuka. (na razie w porządku).
Dlatego w hierarchii nie musisz nic robić, rekwizyty będą z natury reaktywne.
Teraz mówimy o awansie w hierarchii
Jeśli myProp zostanie zmieniony w składniku grandChild, nie zostanie odzwierciedlony w komponencie potomnym. Musisz użyć modyfikatora .sync w potomku i emitować zdarzenie ze składnika grandChild.
Jeśli myProp zostanie zmieniony w komponencie potomnym, nie zostanie odzwierciedlony w komponencie macierzystym. Musisz użyć modyfikatora .sync w obiekcie nadrzędnym i wyemitować zdarzenie ze składnika potomnego.
Jeśli myProp zostanie zmieniony w składniku grandChild, nie zostanie odzwierciedlony w składniku nadrzędnym (oczywiście). Musisz użyć podrzędnego modyfikatora .sync i wyemitować zdarzenie z komponentu wnuka, a następnie obejrzeć prop w komponencie podrzędnym i wyemitować zdarzenie przy zmianie, które jest nasłuchiwane przez komponent nadrzędny za pomocą modyfikatora .sync.
Zobaczmy trochę kodu, aby uniknąć zamieszania
Parent.vue
Child.vue
Grandchild.vue
Ale po tym nie pomożesz zauważyć krzyczących ostrzeżeń mówiących vue
Ponownie, jak wspomniałem wcześniej, większość programistów nie napotyka tego problemu, ponieważ jest to anty-wzór. Dlatego otrzymujesz to ostrzeżenie.
Ale w celu rozwiązania problemu (zgodnie z projektem). Uważam, że musisz wykonać powyższe czynności (włamać się szczerze mówiąc). Nadal zalecam, aby przemyśleć swój projekt i uczynić go mniej podatnym na błędy.
Mam nadzieję, że to pomoże.
źródło
Nie jestem pewien, czy to rozwiązałeś (i czy dobrze rozumiem), ale oto mój pomysł:
Jeśli rodzic otrzyma myProp, a Ty chcesz przekazać go dziecku i obejrzeć w dziecku, wówczas rodzic musi mieć kopię myProp (bez referencji).
Spróbuj tego:
i w html:
tak naprawdę musisz być bardzo ostrożny podczas pracy nad złożonymi kolekcjami w takich sytuacjach (przekazywanie kilka razy)
źródło
do wiązania dwukierunkowego należy użyć modyfikatora .sync
więcej szczegółów...
i musisz użyć właściwości watch w komponencie potomnym, aby nasłuchiwać i aktualizować wszelkie zmiany
źródło
Pracuję z obliczoną właściwością, taką jak:
Zasoby są w tym przypadku własnością:
źródło
Dla mnie jest to grzeczne rozwiązanie, aby uzyskać jedną konkretną zmianę (rekwizyty) i stworzyć z niej logikę
Chciałbym użyć
props
icomputed
właściwości zmiennych , aby utworzyć logikę po, aby otrzymać zmianyMożemy więc użyć _objectDetail na renderowaniu HTML
lub w jakiś sposób:
źródło
Możesz użyć trybu zegarka do wykrywania zmian:
Rób wszystko na poziomie atomowym. Więc najpierw sprawdź, czy sama metoda oglądania jest wywoływana, czy nie, pociesząc coś w środku. Po ustaleniu, że zegarek jest wywoływany, zniszcz go logiką biznesową.
źródło
Używam
props
i zmiennychcomputed
właściwości, jeśli muszę utworzyć logikę po, aby otrzymać zmianyźródło
jeśli myProp jest obiektem, nie można go normalnie zmienić. więc zegarek nigdy się nie uruchomi. powodem, dla którego myProp się nie zmienia, jest to, że w większości przypadków po prostu ustawiasz niektóre klucze myProp. sam myProp wciąż jest tym jedynym. spróbuj oglądać rekwizyty myProp, takie jak „myProp.a”, powinno działać.
źródło
Funkcja zegarka powinna zostać umieszczona w komponencie potomnym. Nie rodzicem.
źródło
@JoeSchr ma dobrą odpowiedź. oto inny sposób na zrobienie tego, jeśli nie chcesz „głęboko: prawda”.
źródło