მოვლენების გამოწვევა 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');
  }
}