Vue-da hodisalarni chiqarish

Siz allaqachon bilasizki, ma'lumotlar ota-komponentlardan farzand komponentlariga o'tadi. Keling, endi farzand komponentlari ota komponentlar bilan qanday muloqot qilishini ko'ramiz. Bunga hodisalarni chiqarish orqali erishiladi. Keling, amalda ko'ramiz.

Faraz qilaylik, ota komponentda quyidagi metod mavjud:

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

Keling, ushbu metodni parametr sifatida farzand komponentiga o'tkazamiz:

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

Keling, chiqariladigan hodisani emits sozlamasida belgilaymiz:

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

Keling, endi farzand komponentida ustiga bosilganda ishlov beradigan tugma yarataylik:

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

Keling, bosish uchun ishlovchini yaratamiz:

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

Keling, endi bosish ishlovchisida ota metodining ishlashiga majbur qilaylik. Buning uchun $emit funksiyasidan foydalanib hodisa chiqaramiz, uning parametrida chiqarilayotgan hodisa nomini ko'rsatamiz:

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