რა აკეთებს $emit მეთოდი Vue.js-ში?

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

სამუშაო პრინციპი:

შვილობილი კომპონენტში იძახება $emit('eventName', payload):
- eventName - სტრიქონი, რომელიც აღნიშნავს შექმნილი მოვლენის სახელწოდებას:
- payload (არასავალდებულო) - ნებისმიერი მონაცემები, რომლებიც უნდა გადაეცეს მშობელ კომპონენტს:
მშობელ კომპონენტში, როდესაც იყენებს შვილობილი კომპონენტს, ეს მოვლენა ისმენს v-on დირექტივით ან მოკლე ფორმით @:
როდესაც შვილობილი კომპონენტი ქმნის მითითებულ სახელწოდების მოვლენას, შესაბამისი დამუშავებელი შესრულდება მშობელ კომპონენტში:

მაგალითი:

შვილობილი კომპონენტი (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 საშუალებას აძლევს შეინარჩუნოს ერთმხრივი მონაცემთა ნაკადის პრინციპი, თავიდან აიცილოს მშობლის პირდაპირი ცვლილება შვილობილი კომპონენტიდან. შვილობილი კომპონენტი მხოლოდ სიგნალს აძლევს მიმდინარე მოვლენაზე, ხოლო მდგომარეობის შეცვლა ხდება მშობელ კომპონენტში.