Dowiedz się, jak model sterowany zdarzeniami może pomóc w przekazywaniu danych między komponentami.

Strukturyzacja aplikacji internetowych przy użyciu architektury komponentowej ułatwia tworzenie i konserwację aplikacji.

Emitowanie niestandardowych zdarzeń to jeden ze sposobów obsługi komunikacji między komponentami; rekwizyty i gniazda to dwie inne. Zdarzenia niestandardowe umożliwiają wysyłanie danych z komponentu podrzędnego do komponentu nadrzędnego.

Wysyłaj zdarzenia od dziecka do jego rodzica

Vue oferuje wiele opcji komunikacji między komponentami. Jeden znaczący sposób komunikacja między komponentami odbywa się za pośrednictwem rekwizytów. Rekwizyty umożliwiają wysyłanie danych z komponentów nadrzędnych do komponentów podrzędnych.

Co się stanie, jeśli chcesz wysłać dane z komponentu potomnego do komponentu nadrzędnego? Vue umożliwia emitowanie niestandardowych zdarzeń z komponentów potomnych do komponentów nadrzędnych. Ten proces umożliwia komponentowi nadrzędnemu korzystanie z danych i funkcji komponentu podrzędnego.

instagram viewer

Na przykład wyobraź sobie komponent przycisku z funkcją, która zwraca wartość po każdym kliknięciu. Będziesz musiał wyemitować to zdarzenie do komponentu nadrzędnego, aby komponent nadrzędny mógł zaktualizować swój stan lub wykonać akcję na podstawie zwróconej wartości.

Konwencja nazewnictwa dla niestandardowych emitowanych zdarzeń w Vue

Zanim zagłębisz się w sposób emitowania niestandardowych zdarzeń, musisz zrozumieć konwencję nazewnictwa dla niestandardowych zdarzeń w Vue. Zanim pojawiła się Vue 3, programiści musieli ściśle definiować niestandardowe zdarzenia skrzynka na kebab, oddzielając słowa w nazwach znakiem łącznika.

Obecnie standardową praktyką jest definiowanie niestandardowych wydarzeń w przypadku kebaba podczas pracy z szablonami HTML i wielbłądCase podczas pracy z JavaScriptem. Możesz jednak wybrać dowolną opcję podczas pracy z JavaScriptem, ponieważ Vue kompiluje wszystkie niestandardowe zdarzenia z powrotem do kebab-case.

Gdy emitujesz zdarzenie niestandardowe, przekaż cel zdarzenia za pomocą opisowej nazwy. Jest to bardzo ważne, zwłaszcza gdy pracujesz w zespole, aby cel wydarzenia był jasny.

Jak emitować niestandardowe zdarzenia z komponentu potomnego do komponentu nadrzędnego

Istnieją dwa sposoby na emitowanie niestandardowych zdarzeń w Vue. Możesz emitować niestandardowe zdarzenia inline (bezpośrednio w szablonie Vue) za pomocą $emitować metoda zapewniana przez Vue. Możesz także skorzystać z tzw zdefiniujEmituje makro dostępne w Vue 3.

Emitowanie niestandardowych zdarzeń w Vue za pomocą metody $emit

$emitować, wbudowana metoda Vue, umożliwia komponentowi podrzędnemu wysłanie zdarzenia do komponentu nadrzędnego. Wywołujesz tę metodę bezpośrednio (w szablonie komponentu podrzędnego), aby wywołać zdarzenie niestandardowe. Metoda $emit przyjmuje dwa argumenty: nazwę zdarzenia, które chcesz wyemitować, oraz opcjonalny ładunek, który może przenosić dodatkowe dane.

Rozważ ten komponent potomny, który emituje zdarzenie, aby powiadomić komponent nadrzędny o kliknięciu przycisku:

 ChildComponent. vue 
<scenariuszorganizować coś>
importuj { ref } z 'vue';
stały post = ref('')
scenariusz>
<szablon>
<dz>
<wejścietyp="tekst"model v="post">
<przyciskv-on: kliknij="$emit('przycisk kliknięty', post)">Postprzycisk>
dz>
szablon>

Ten blok kodu pokazuje, jak emitować niestandardowe zdarzenie ze składnika podrzędnego. Dziecko zaczyna od zainicjowania zmiennej post z pustym łańcuchem.

Następnie komponent potomny wiąże element wejściowy ze zmienną post za pomocą modelu v, a Dyrektywa powiązań danych Vue. To powiązanie umożliwia wprowadzanie zmian w polu wejściowym w celu automatycznej aktualizacji zmiennej post.

Element przycisku ma dyrektywę v-on, która nasłuchuje zdarzeń kliknięcia przycisku. Kliknięcie przycisku wywołuje metodę $emit z dwoma argumentami: nazwą zdarzenia „kliknięto przyciskiem” i wartością zmiennej post.

Komponent nadrzędny może teraz nasłuchiwać zdarzenia niestandardowego za pomocą dyrektywy v-on for obsługa zdarzeń w Vue:

 Komponent nadrzędny. vue 
importuj { ref } z "vue";
zaimportuj ChildComponent z "./components/ChildComponent.vue";
stała lista postów = ref([])


const addPosts = (post) => {
 postList.value.push (post)
}
scenariusz>
<szablon>
<dz>
<Element podrzędny @kliknięty przyciskiem=„dodaj posty”/>
<ul>
<liv-za="post na liście postów">{{ post }}li>
ul>
dz>
szablon>

Ten blok kodu demonstruje importowanie komponentu nadrzędnego i używanie komponentu podrzędnego z wcześniejszego okresu. Komponent nadrzędny definiuje a lista postów zmienna tablicowa jako referencja reaktywna. Następnie komponent definiuje plik dodaj posty funkcja, która działa, biorąc a post argument. Funkcja dodaje nowy post do tablicy postList z rozszerzeniem naciskać() metoda.

The @przycisk kliknięty detektor zdarzeń przechwytuje zdarzenie niestandardowe Element podrzędny emituje po kliknięciu przycisku. To zdarzenie powoduje uruchomienie funkcji addPosts. Na koniec blok kodu dołącza plik v-za dyrektywa dot renderowanie list w Vue do elementu ul w celu iteracji po tablicy postList.

Emitowanie zdarzeń za pomocą makra defineEmits

Vue 3 wprowadził zdefiniujEmituje makro, które jawnie definiuje zdarzenia, które komponent może emitować. To makro zapewnia bezpieczny dla typów sposób emitowania zdarzeń prowadzących do bardziej uporządkowanej bazy kodu.

Oto przykład wykorzystania makra defineEmits i wywołania go w komponencie potomnym:

 ChildComponent. vue 
<scenariuszorganizować coś>
importuj { ref } z "vue";
const emit = defineEmits(["kliknięcie przycisku"]);


const post = ref("");


const przyciskKliknij = () => {
 emit("kliknięto przyciskiem", post.value);
};
scenariusz>
<szablon>
<dz>
<wejścietyp="tekst"model v="post" />
<przyciskv-on: kliknij=„Kliknij przycisk”>Postprzycisk>
dz>
szablon>

Chociaż funkcjonalność pozostaje taka sama, istnieją znaczne różnice w składni kodu między powyższym blokiem kodu a blokiem z $emitować funkcjonować.

W tym bloku kodu plik zdefiniujEmituje makro definiuje kliknięty przyciskiem wydarzenie. Wywołując to makro, blok kodu zwraca funkcję $emit, umożliwiającą emisję zdefiniowanych zdarzeń. Tablica przekazana do makra defineEmits w komponencie będzie zawierała wszystkie zdarzenia, które należy wyemitować do komponentu nadrzędnego.

Następnie blok kodu definiuje a przyciskKliknij funkcjonować. Ta funkcja emituje zdarzenie kliknięcia przycisku i zmienną post do komponentu nadrzędnego. Blok szablonu komponentu potomnego zawiera element przycisku.

Element przycisku ma v-on: kliknij dyrektywa wywołująca funkcję buttonClick. Komponent nadrzędny może następnie użyć komponentu podrzędnego w taki sam sposób, jak w przypadku metody $emit.

Deweloperzy Vue czerpią korzyści z architektury opartej na komponentach

Możesz komunikować się z komponentu podrzędnego do jego rodzica, emitując zdarzenia za pomocą metody $emit i makra defineEmits.

Możesz czerpać korzyści z architektury Vue opartej na komponentach, ponieważ pozwala ona pisać bardziej uporządkowany, zwięzły kod. Dzięki nowoczesnym frameworkom JavaScript, takim jak Vue, możesz użyć Web Components, standardu sieciowego W3C, aby osiągnąć tę architekturę opartą na komponentach.