Tapahtumien lähettäminen Vuesa
Kuten jo tiedät, data liikkuu vanhempikomponenteista lapsikomponentteihin. Katsotaan nyt, kuinka lapsikomponentit voivat kommunikoida vanhempikomponenttien kanssa. Tämä tapahtuu tapahtumien lähettämisen avulla. Katsotaan käytännössä.
Oletetaan, että vanhempikomponentissa on jokin metodi:
methods: {
func() {
alert('xxx');
}
}
Annetaan tämä metodi parametrina lapsikomponenttiin:
<template>
<User @show="func" />
</template>
Määritellään lähetettävä tapahtuma
emits-asetuksessa:
export default {
emits: ['show'],
data() {
return {
}
}
}
Tehdään nyt lapsikomponentissa painike, joka käsittelee siihen klikkaamisen:
<template>
<button @click="handle">btn</button>
</template>
Tehdään klikkauksen käsittelijä:
methods: {
handle() {
}
}
Saadaan nyt klikkauksen käsittelijässä
vanhempikomponentin funktio
suoritettua. Tätä varten lähetetään
tapahtuma käyttämällä funktiota $emit,
jonka parametrina määritellään lähetettävän
tapahtuman nimi:
methods: {
handle() {
this.$emit('show');
}
}
Anna lapsikomponenttiin kaksi funktiota. Tee lapsikomponenttiin kaksi painiketta, joista kukin käynnistää yhden annetuista funktioista.
