Vue-ში როგორ გადავცეთ მონაცემები ან მეთოდები შვილობილი კომპონენტიდან მშობელ კომპონენტზე?

Vue.js-ში, შემთხვევითი მექანიზმი ჩვეულებრივ გამოიყენება მონაცემების გადაცემისთვის ან მეთოდების გამოძახებისთვის შვილობილი კომპონეტიდან მშობელზე.

შვილობილი კომპონენტი შეუძლია $emit-ის გამოყენებით გამოაგზავნოს მოვლენა საჭირო მონაცემებით, ხოლო მშობელი კომპონენტი ეს მოვლენა უსმენს და რეაგირებს.

მაგალითი:

<!-- მშობელი კომპონენტი -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('შვილიდან მიღებული მონაცემები:', payload);
    }
  }
}
</script>

<!-- შვილობილი კომპონენტი -->
<template>
  <button @click="sendData">მონაცემების გადაცემა მშობელზე</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'გამარჯობა, მშობელ!' });
    }
  }
}
</script>

ამ გზით, შვილობილი კომპონენტი პირდაპირ არ იძახის მშობლის მეთოდებს, არამედ იუწყება მოვლენის შესახებ, და მშობელი გადაწყვეტს, რა გააკეთოს მასთან. ეს მხარს უჭერს ერთმხრივ მონაცემთა ნაკადის პრინციპს და ამარტივებს მდგომარეობის მართვას.