Kutuma Matukio katika Vue

Kama unavyojua tayari, data husogea kutoka kwa vipengele vya mzazi hadi kwa vile vidogo. Hebu tuangalie sasa jinsi vipengele vidogo vinavyoweza kuwasiliana na vile vya mzazi. Hii inafanywa kwa kutumia kutuma matukio. Hebu tuangalie kwa vitendo.

Hebu kwenye kipengele kikuu kuwe na mbinu fulani:

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

Tupitishe mbinu hii kama kigezo kwenye kipengele kichanga:

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

Tuandike tukio linalotumwa kwenye mpangilio emits:

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

Hebu sasa kwenye kipengele kichanga tutengeneze kifungo ambacho kitashughulikia kubofya kwake:

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

Tutengeneze kishughulikia kubofya:

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

Hebu sasa kwenye kishughulikia kubofya tulazimishe kuitwa kwa kitendo cha mzazi. Ili kufanya hivyo tuma tukio kwa kutumia kitendo $emit, ukiweka kigezo chake jina la tukio linalotumwa:

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