Ut sending av hendelser i Vue

Som du allerede vet, beveger data seg fra foreldrekomponenter til barnekomponenter. La oss nå se på hvordan barnekomponenter kan kommunisere med foreldrekomponenter. Dette gjøres ved å sende hendelser. La oss se på det i praksis.

Anta at i foreldrekomponenten er det en metode:

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

La oss sende denne metoden som en parameter til barnekomponenten:

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

La oss definere den sendte hendelsen i konfigurasjonen emits:

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

La oss nå i barnekomponenten lage en knapp som vil håndtere et klikk på den:

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

La oss lage en klikk-håndterer:

components/User.vuemethods: {
  handle() {
    
  }
}

La oss nå i klikk-håndtereren få den foreldre metoden til å kalles. For å gjøre dette, sender vi en hendelse ved hjelp av funksjonen $emit, og spesifiserer navnet på den sendte hendelsen som parameter:

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