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>

Мындайча айтканда, бала компоненти түздөн-түз ата-эне методдорун чакырбайт, ал эми окуяны билдирет, жана ата-эне аны менен эмне кылуу керектигин чечет. Бул бир тараптуу маалымат агымын колдойт жана абалдын башкарылуын жөнөкөйлөтөт.