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:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Annetaan tämä metodi parametrina lapsikomponenttiin:

App.vue<template>
  <User @show="func" />
</template>

Määritellään lähetettävä tapahtuma emits-asetuksessa:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Tehdään nyt lapsikomponentissa painike, joka käsittelee siihen klikkaamisen:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

Tehdään klikkauksen käsittelijä:

components/User.vuemethods: {
  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:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}