Zaczynam bawić się vuejsami (2.0). Zbudowałem prostą stronę z jednym komponentem. Strona ma jedną instancję Vue z danymi. Na tej stronie zarejestrowałem się i dodałem komponent do html. Komponent ma jeden input[type=text]
. Chcę, aby ta wartość odzwierciedlała rodzica (główna instancja Vue).
Jak poprawnie zaktualizować dane nadrzędne komponentu? Podanie związanego rekwizytu od rodzica nie jest dobre i powoduje wyświetlenie niektórych ostrzeżeń na konsoli. Mają coś w swoim doktorze, ale to nie działa.
javascript
vue.js
vue-component
Gal Ziv
źródło
źródło
Odpowiedzi:
Dwukierunkowe wiązanie zostało wycofane w Vue 2.0 na korzyść używania architektury bardziej sterowanej zdarzeniami. Ogólnie rzecz biorąc, dziecko nie powinno mutować swoich rekwizytów. Powinien raczej
$emit
zdarzyć się i pozwolić rodzicowi zareagować na te zdarzenia.W twoim konkretnym przypadku możesz użyć komponentu niestandardowego z
v-model
. Jest to specjalna składnia, która pozwala na coś zbliżonego do dwukierunkowego wiązania, ale w rzeczywistości jest skrótem opisanej powyżej architektury sterowanej zdarzeniami. Możesz o tym przeczytać tutaj -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .Oto prosty przykład:
Dokumenty to stwierdzają
jest równa
Dlatego też właściwość dziecka musi mieć nazwę value i dlaczego dziecko musi emitować zdarzenie o nazwie
input
.źródło
undefined
aż do pierwszej zmiany. Zobacz te skrzypce, na których skomentowałemprops: ['value']
. Zwróć uwagę, jaka jest wartość początkowaundefined
, zamiasthello
: jsfiddle.net/asemahle/8Lrkfxj6 . Po pierwszej zmianie Vue dynamicznie dodaje wartość właściwości do komponentu, więc działa.Z dokumentacji :
Jak przekazywać rekwizyty
Poniżej znajduje się kod służący do przekazywania właściwości do elementu podrzędnego:
Jak wyemitować wydarzenie
HTML:
JS:
źródło
W komponencie podrzędnym:
W komponencie macierzystym:
źródło
Komponent podrzędny
Służy
this.$emit('event_name')
do wysyłania zdarzenia do komponentu nadrzędnego.Komponent nadrzędny
Aby wysłuchać tego zdarzenia w komponencie nadrzędnym, wykonujemy
v-on:event_name
i pojawia się metoda (ex. handleChange
), którą chcemy wykonać na tym zdarzeniuGotowe :)
źródło
Zgadzam się z emisją zdarzenia i odpowiedziami v-model dla tych powyżej. Pomyślałem jednak, że opublikuję to, co znalazłem o komponentach z wieloma elementami formularza, które chcą wyemitować z powrotem do swojego rodzica, ponieważ wydaje się, że jest to jeden z pierwszych artykułów zwróconych przez Google.
Wiem, że pytanie dotyczy pojedynczego wejścia, ale wydawało się, że jest to najbliższe dopasowanie i może zaoszczędzić ludziom trochę czasu dzięki podobnym komponentom vue. Ponadto nikt jeszcze nie wspomniał o
.sync
modyfikatorze.O ile wiem,
v-model
rozwiązanie jest odpowiednie tylko dla jednego wejścia powracającego do rodzica. Poszukiwanie tego zajęło mi trochę czasu, ale dokumentacja Vue (2.3.0) pokazuje, jak zsynchronizować wiele właściwości wysyłanych do komponentu z powrotem do elementu nadrzędnego (oczywiście przez emitowanie).Właściwie nazywa się to
.sync
modyfikatorem.Oto, co mówi dokumentacja :
Możesz także zsynchronizować wiele na raz, wysyłając przez obiekt. Sprawdź dokumentację tutaj
źródło
Sposób jest prostszy w użyciu
this.$emit
Ojciec vue
Child.vue
Mój pełny przykład: https://codesandbox.io/s/update-parent-property-ufj4b
źródło
Możliwe jest również przekazanie właściwości jako obiektu lub tablicy. W tym przypadku dane będą wiązane dwukierunkowo:
(Zaznaczono to na końcu tematu: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )
źródło
Właściwy sposób to
$emit()
zdarzenie w komponencie podrzędnym, którego nasłuchuje główna instancja Vue .źródło
1) Element podrzędny: możesz użyć tego w komponencie potomnym, pisz w ten sposób: this.formValue służy do wysyłania danych do komponentu nadrzędnego
2) Parrent Compnenet: iw tagu komponentu równoległego otrzymuj zmienną wysyłaną w ten sposób: i to jest kod do odbioru danych składowych potomnych w tagu komponentu nadrzędnego
źródło
Innym sposobem jest przekazanie referencji setera od rodzica jako rekwizytu do komponentu potomnego, podobnie jak robią to w Reakcie. Powiedzmy, że masz sposób
updateValue
na rodziców, aby zaktualizować wartość, można instancję komponentu dziecko tak:<child :updateValue="updateValue"></child>
. Następnie na dziecko będzie mieć odpowiedni rekwizyt:props: {updateValue: Function}
i w szablonie wywołać metodę, gdy zmienia wejście:<input @input="updateValue($event.target.value)">
.źródło
Nie wiem dlaczego, ale właśnie pomyślnie zaktualizowałem dane nadrzędne, używając danych jako obiektu
:set
icomputed
Parent.vue
Child.vue
źródło
jego przykład pokaże, jak przekazać wartość wejściową do rodzica po naciśnięciu przycisku przesyłania.
Najpierw zdefiniuj eventBus jako nowy Vue.
źródło
Myślę, że to wystarczy:
@change="$emit(variable)"
źródło