Vue-তে ইভেন্ট নির্গমন

আপনি ইতিমধ্যেই জানেন, ডেটা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে প্রবাহিত হয়। এখন দেখা যাক, চাইল্ড কম্পোনেন্টগুলি কিভাবে প্যারেন্ট কম্পোনেন্টের সাথে যোগাযোগ করতে পারে। এটি ইভেন্ট নির্গমন এর মাধ্যমে করা হয়। আসুন অনুশীলনে দেখি।

ধরুন প্যারেন্ট কম্পোনেন্টে একটি নির্দিষ্ট মেথড আছে:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

চাইল্ড কম্পোনেন্টে এই মেথডটি প্যারামিটার হিসেবে পাস করা যাক:

App.vue<template>
  <User @show="func" />
</template>

emits কনফিগারেশনে নিগৃহীত ইভেন্টটি লিখুন:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

এখন চাইল্ড কম্পোনেন্টে একটি বাটন তৈরি করা যাক, যা এর উপর ক্লিক হ্যান্ডেল করবে:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

ক্লিক হ্যান্ডলার তৈরি করা যাক:

components/User.vuemethods: {
  handle() {
    
  }
}

এখন ক্লিক হ্যান্ডলারে প্যারেন্ট ফাংশনটি কল করানো যাক। এজন্য $emit ফাংশন ব্যবহার করে একটি ইভেন্ট নির্গত করুন, এর প্যারামিটার হিসেবে নির্গত ইভেন্টের নাম উল্লেখ করুন:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}