Vue.js'te $emit ыкмасы эмне кылат?

$emit ыкмасы колдонулат колдонуучунун белгилеген иш-чараларын балалык компоненти аркылуу түзүү үчүн. Бул Vueда бир тараптуу маалымат агымында балалык компонентинин ата-энесине өз ара аракеттенүүнүн негизги жолу. Ал балалык компонентке кандайдыр бир иш-чара болгонун кабарлоого жана керек болсо, маалыматтарды өткөрүп берүүгө мүмкүндүк берет:

Иштин иштөө принциби:

1. Балалык компонентте $emit('eventName', payload) деп чакырылат:
   • eventName - түзүлө турган иш-чаранын аты, сап түрүндө:
   • payload (міндеттүү эмес) - ата-эне компонентине өткөрүлө турган бардык маалыматтар:
2. Ата-эне компоненти балалык компонентти колдонуп жатканда, бул иш-чараны v-on директивасы же кыскача форма @ аркылуу угат:
3. Балалык компонент белгиленген аталыштагы иш-чараны түзгөндө, ага ылайык иштетүүчү ата-эне компонентте ишке ашырылат:

Мисал:

Балалык компонент (ChildComponent.vue):

<template>
  <button @click="handleClick">Мени бас</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // `buttonClicked` иш-чарасын payloadсуз түзүү
      this.$emit('buttonClicked');
    }
  }
}
</script>

Ата-эне компонент (ParentComponent.vue):

<template>
  <!-- `buttonClicked` иш-чарасын угуп жатабыз -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Бул ыкма балалык компонент `buttonClicked` түзгөндө ишке ашырылат
      console.log('Балалык компоненттеги баскыч басылды!');
    }
  }
}
</script>

$emit бир тараптуу маалымат агымын сактоого мүмкүндүк берет, ата-эненин түздөн-түз өзгөртүүсүн алдын алат. Балалык компонент гана болуп жатканды билдирет, ал эми абалдын өзгөрүшү ата-эне компонентте болот.