Udsendelse af events i Vue

Som du allerede ved, bevæger data sig fra forældrekomponenter til underkomponenter. Lad os nu se på, hvordan underkomponenter kan kommunikere med forældrekomponenter. Dette gøres ved hjælp af udsendelse af events. Lad os se på det i praksis.

Lad der i forældrekomponenten være en eller anden metode:

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

Lad os sende denne metode som parameter til underkomponenten:

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

Lad os angive det udsendte event i indstillingen emits:

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

Lad os nu i underkomponenten lav en knap, som vil håndtere klik på den:

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

Lad os lave en klikhåndterer:

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

Lad os nu i klikhåndtereren få den forældre metode til at blive kaldt. For at gøre dette udsender vi et event ved hjælp af funktionen $emit, hvor vi angiver navnet på det udsendte event som parameter:

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