მოვლენების გამოწვევა Vue-ში
როგორც უკვე იცით, მონაცემები გადაადგილდება მშობელი კომპონენტებიდან შვილში. ახლა ვნახოთ, როგორ შეუძლიათ შვილ კომპონენტებს ურთიერთობა მშობელ კომპონენტებთან. ეს ხდება მოვლენების გამოწვევის გზით. ვნახოთ პრაქტიკაში.
დავუშვათ, მშობელ კომპონენტში არის გარკვეული მეთოდი:
methods: {
func() {
alert('xxx');
}
}
გადავცეთ ეს მეთოდი პარამეტრად შვილ კომპონენტს:
<template>
<User @show="func" />
</template>
დავწეროთ გამოსწვეული მოვლენა
emits კონფიგურაციაში:
export default {
emits: ['show'],
data() {
return {
}
}
}
ახლა შვილ კომპონენტში გავაკეთოთ ღილაკი, რომელიც დააკლიკებს მასზე:
<template>
<button @click="handle">btn</button>
</template>
გავაკეთოთ კლიკის დამმუშავებელი:
methods: {
handle() {
}
}
ახლა კლიკის დამმუშავებელში
მოვახდინოთ მშობელი ფუნქციის
გამოძახება. ამისთვის გამოვწვიოთ
მოვლენა $emit ფუნქციის გამოყენებით,
მის პარამეტრად მიუთითეთ გამოსწვეული
მოვლენის სახელი:
methods: {
handle() {
this.$emit('show');
}
}
გადაცეთ შვილ კომპონენტს ორი ფუნქცია. გააკეთეთ შვილ კომპონენტში ორი ღილაკი, რომელთაგან თითოეული გამოიძახებს ერთ-ერთ გადაცემულ ფუნქციას.
