Vue.js to popularny framework JavaScript do budowania interaktywnych aplikacji webowych. Jedną z jego najmocniejszych stron jest vue js emit, dzięki któremu komponenty wysyłają zdarzenia do swoich rodziców. Ten szczegółowy przewodnik pokaże ci, jak używać vue js emit w kodzie Vue.js.
Czym jest Vue js emit?
$emit to sposób komunikacji między komponentami Vue.js. Pozwala wysyłać zdarzenia od dziecka do rodzica. Oznacza to, że z komponentu potomnego wywołasz akcję w komponencie nadrzędnym.
Po co go używać?
Po emit sięgasz wtedy, gdy chcesz przekazać informacje albo zdarzenia z komponentu potomnego do nadrzędnego. Jeśli na przykład masz formularz w komponencie potomnym i chcesz wysłać jego dane do rodzica, żeby ten je przetworzył, użyjesz do tego emit.
Jak używać Vue js emit?
Użycie emit jest bardzo proste. Najpierw zgłoś zdarzenie w komponencie potomnym metodą $emit(). Oto przykład:
this.$emit('eventName', data)eventName to nazwa zdarzenia, a data to dane, które chcesz razem z nim wysłać.
Następnie w komponencie nadrzędnym nasłuchujesz tego zdarzenia dyrektywą v-on:
<ChildComponent v-on:eventName="eventHandler"/>eventHandler to metoda wywoływana w chwili wyzwolenia zdarzenia.
Kompletny przykład użycia $emit
Oto pełny przykład pokazujący, jak używać emit w kodzie Vue.js:
<template>
<div>
<ChildComponent @eventName="eventHandler"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
eventHandler (data) {
console.log(data)
}
}
}
</script>
// ChildComponent.vue
<template>
<button @click="sendData">Envoyer les données</button>
</template>
<script>
export default {
methods: {
sendData () {
this.$emit('eventName', 'Données envoyées depuis le composant enfant')
}
}
}
</script>W tym kodzie mamy komponent nadrzędny, który osadza komponent potomny `ChildComponent`. Kiedy klikniesz przycisk w komponencie potomnym, wyzwalane jest zdarzenie `eventName` z danymi `‘Données envoyées depuis le composant enfant‘`. Komponent nadrzędny nasłuchuje go dyrektywą `@eventName` i przy jego wyzwoleniu wywołuje metodę `eventHandler`.
Podsumowanie
Podsumowując: `emit` to potężna funkcja Vue.js, dzięki której przekazujesz zdarzenia z komponentu potomnego do nadrzędnego. Jest łatwa w użyciu i bywa cennym narzędziem komunikacji między komponentami w twojej aplikacji. Po tym przewodniku powinieneś bez obaw sięgać po `emit` we własnym kodzie Vue.js.
