Notikumu izsūtīšana Vue

Kā jūs jau zināt, dati pārvietojas no vecāku komponentēm uz meitas komponentēm. Tagad apskatīsim, kā meitas komponentes var sazināties ar vecāku komponentēm. Tas tiek darīts, izmantojot notikumu izsūtīšanu. Apskatīsim to praksē.

Pieņemsim, ka vecāka komponentē ir kāda metode:

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

Pārsūtīsim šo metodi kā parametru meitas komponentē:

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

Norādīsim izsūtāmo notikumu konfigurācijā emits:

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

Tagad meitas komponentē izveidosim pogu, kas apstrādās klikšķi uz tās:

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

Izveidosim klikšķa apstrādātāju:

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

Tagad klikšķa apstrādātājā liksim izsaukties vecāka funkcijai. Lai to izdarītu, izsūtīsim notikumu, izmantojot funkciju $emit, kuras parametrā norādot izsūtāmā notikuma nosaukumu:

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