Emetimi i Ngjarjeve në Vue

Siç e dini tashmë, të dhënat lëvizin nga komponentët prind në ato fëmijë. Le të shohim tani se si komponentët fëmijë mund të komunikojnë me prindërit. Kjo bëhet duke përdorur emetimin e ngjarjeve. Le ta shohim në praktikë.

Le të themi që në komponentin prind ekziston një metodë:

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

Le ta kalojmë këtë metodë si parametër në komponentin fëmijë:

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

Le të përcaktojmë ngjarjen e emetuar në konfigurimin emits:

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

Le të bëjmë tani në komponentin fëmijë një buton, i cili do të trajtojë klikimin mbi të:

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

Le të krijojmë një trajtues klikimi:

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

Le të bëjmë që tani në trajtuesin e klikimit të thirret funksioni prind. Për këtë, le të emetojmë ngjarjen duke përdorur funksionin $emit, duke përcaktuar si parametër të tij emrin e ngjarjes së emetuar:

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