Vue'da bolajon komponentdan ota-ona komponentga ma'lumotlar yoki metodlarni qanday o'tkazish mumkin?

Vue.js da, odatda, voqealar mexanizmi orqali bolalar komponentidan ota-ona komponentiga ma'lumot uzatish yoki metodlarni chaqirish uchun ishlatiladi.

Bolalar komponenti $emit yordamida kerakli ma'lumotlar bilan voqea yuborishi mumkin, va ota-ona komponenti bu voqeani tinglab, unga javob beradi.

Misol:

<!-- Ota-ona komponenti -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Boladan olingan maʼlumot:', payload);
    }
  }
}
</script>

<!-- Bolalar komponenti -->
<template>
  <button @click="sendData">Ota-ona uchun ma'lumot yuborish</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Salom, ota-ona!' });
    }
  }
}
</script>

Shu tarzda, bolalar komponenti to'g'ridan-to'g'ri ota-ona metodlarini chaqirmaydi, balki voqeani bildiradi, va ota-ona nima qilishni o'z xohishiga ko'ra hal qiladi. Bu yagona yo'nalishli ma'lumot oqimini qo'llab-quvvatlaydi va holatni boshqarishni soddalashtiradi.