Vueда воқеалар чиқариш

Сиз билганингиздек, маълумотлар ота-она компонентларидан ёрдамчи компонентларга йўналтирилади. Энди ёрдамчи компонентлар ота-она компонентлари билан қандай алоқа қилишини кўрамиз. Бу воқеалар чиқариш орқали амалга оширилади. Келиб, амалда кўрамиз.

Ота-она компонентида айрим метод бор деб фараз қилайлик:

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

Ушбу методни параметр сифатида ёрдамчи компонентга ўтказамиз:

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

Чиқарилаётган воқеани emits созламасида мослаштирамиз:

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

Энди ёрдамчи компонентада устига босилганини қайта ишлов берадиган туғма ясаймиз:

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

Босилганини қайта ишловчини ясаймиз:

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

Энди босилганини қайта ишловчида ота-она функцияси ишлашини таъминлаймиз. Бунинг учун $emit функцияси ёрдамида воқеа чиқарамиз, унинг параметри сифатида чиқарилаётган воқеа номини кўрсатамиз:

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