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">баскыч</button>
</template>

Тыктоо иштеткичин жасайлы:

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

Келгиле азыр тыктоо иштеткичинде ата-эне функциясы ишке кириши үчүн милдеттейли. Бул үчүн $emit функциясынын жардамы менен окуяны чыгарабыз, анын параметри катары чыгарыла турган окуянын атын көрсөтөбүз:

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