Skip to content

Component Events

এই পৃষ্ঠাটি ধরে নেওয়া হচ্ছে আপনি ইতিমধ্যেই Components Basics পড়েছেন। আপনি যদি কম্পোনেন্টগুলিতে নতুন হন তবে প্রথমে এটি পড়ুন।

Emitting and Listening to Events

একটি component অন্তর্নির্মিত $emit পদ্ধতি ব্যবহার করে সরাসরি টেমপ্লেট এক্সপ্রেশনে (যেমন v-on হ্যান্ডলারে) কাস্টম ইভেন্ট নির্গত করতে পারে:

template
<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

$emit() পদ্ধতিটি কম্পোনেন্ট ইনস্ট্যান্সে this.$emit() হিসেবেও পাওয়া যায়:

js
export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

তারপর parent v-on ব্যবহার করে এটি শুনতে পারেন:

template
<MyComponent @some-event="callback" />

.once সংশোধকটি কম্পোনেন্ট ইভেন্ট শ্রোতাদের জন্যও সমর্থিত:

template
<MyComponent @some-event.once="callback" />

কম্পোনেন্ট এবং প্রপসের মতো, ইভেন্টের নামগুলি একটি স্বয়ংক্রিয় কেস রূপান্তর প্রদান করে। লক্ষ্য করুন আমরা একটি ক্যামেলকেস ইভেন্ট নির্গত করেছি, কিন্তু পিতামাতার মধ্যে একটি কাবাব-কেসড শ্রোতা ব্যবহার করে এটি শুনতে পারি। প্রপস কেসিং এর মতো, আমরা টেমপ্লেটে কাবাব-কেসড ইভেন্ট শ্রোতাদের ব্যবহার করার পরামর্শ দিই।

TIP

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

Event Arguments

এটি কখনও কখনও একটি ইভেন্টের সাথে একটি নির্দিষ্ট মান নির্গত করা দরকারী। উদাহরণ স্বরূপ, আমরা <BlogPost> কম্পোনেন্টকে টেক্সটকে কতটা বড় করতে হবে তার দায়িত্বে থাকতে চাই। এই ক্ষেত্রে, আমরা এই মান প্রদান করতে $emit-এ অতিরিক্ত আর্গুমেন্ট পাঠাতে পারি:

template
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

তারপর, যখন আমরা পিতামাতার ইভেন্টটি শুনি, তখন আমরা শ্রোতা হিসাবে একটি ইনলাইন তীর ফাংশন ব্যবহার করতে পারি, যা আমাদের ইভেন্ট আর্গুমেন্ট অ্যাক্সেস করতে দেয়:

template
<MyButton @increase-by="(n) => count += n" />

অথবা, যদি ইভেন্ট হ্যান্ডলার একটি পদ্ধতি হয়:

template
<MyButton @increase-by="increaseCount" />

তারপর মানটি সেই পদ্ধতির প্রথম প্যারামিটার হিসাবে পাস করা হবে:

js
methods: {
  increaseCount(n) {
    this.count += n
  }
}
js
function increaseCount(n) {
  count.value += n
}

TIP

ইভেন্টের নামের পরে সমস্ত অতিরিক্ত আর্গুমেন্ট $emit()-এ পাঠানো হয়েছে শ্রোতার কাছে ফরোয়ার্ড করা হবে। উদাহরণস্বরূপ, $emit('foo', 1, 2, 3) দিয়ে শ্রোতা ফাংশন তিনটি আর্গুমেন্ট পাবে।

Declaring Emitted Events

একটি কম্পোনেন্ট স্পষ্টভাবে ইভেন্ট ঘোষণা করতে পারে এটি ব্যবহার করে নির্গত হবে defineEmits() ম্যাক্রোemits বিকল্প:

vue
<script setup>
defineEmits(['inFocus', 'submit'])
</script>

আমরা <template> এ যে $emit পদ্ধতিটি ব্যবহার করেছি সেটি কোনো কম্পোনেন্টের <script setup> বিভাগে অ্যাক্সেসযোগ্য নয়, কিন্তু defineEmits() একটি সমতুল্য ফাংশন প্রদান করে যা আমরা পরিবর্তে ব্যবহার করতে পারি:

vue
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

defineEmits() ম্যাক্রো কোনও ফাংশনের ভিতরে ব্যবহার করা যাবে না, এটি অবশ্যই উপরের উদাহরণের মতো সরাসরি <script setup>-এর মধ্যে রাখতে হবে।

আপনি যদি <script setup> এর পরিবর্তে একটি স্পষ্ট setup ফাংশন ব্যবহার করেন, তবে ইভেন্টগুলি emits বিকল্প ব্যবহার করে ঘোষণা করা উচিত এবং emit ফাংশনটি হল setup() প্রসঙ্গে প্রকাশ করা হয়েছে:

js
export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

setup() প্রসঙ্গের অন্যান্য বৈশিষ্ট্যের মতো, emit নিরাপদে ধ্বংস করা যেতে পারে:

js
export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}
js
export default {
  emits: ['inFocus', 'submit']
}

emits অপশন এবং defineEmits() ম্যাক্রোও একটি অবজেক্ট সিনট্যাক্স সমর্থন করে। TypeScript ব্যবহার করলে আপনি আর্গুমেন্ট টাইপ করতে পারেন, যা আমাদের নির্গত ইভেন্টের পেলোডের রানটাইম বৈধতা সম্পাদন করতে দেয়:

vue
<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // return `true` or `false` to indicate
    // validation pass / fail
  }
})
</script>

আপনি যদি <script setup> এর সাথে TypeScript ব্যবহার করেন, তাহলে বিশুদ্ধ ধরনের টীকা ব্যবহার করে নির্গত ইভেন্ট ঘোষণা করাও সম্ভব:

vue
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

আরো বিস্তারিত: টাইপিং কম্পোনেন্ট এমিটস

js
export default {
  emits: {
    submit(payload: { email: string, password: string }) {
      // return `true` or `false` to indicate
      // validation pass / fail
    }
  }
}

আরো দেখুন: Typing Component Emits

যদিও ঐচ্ছিক, একটি কম্পোনেন্ট কীভাবে কাজ করবে তা আরও ভালভাবে নথি করার জন্য সমস্ত নির্গত ইভেন্টকে সংজ্ঞায়িত করার সুপারিশ করা হয়। এটি Vue-কে পরিচিত শ্রোতাদের fallthrough attributes থেকে বাদ দেওয়ার অনুমতি দেয়, 3য় পক্ষের কোড দ্বারা ম্যানুয়ালি প্রেরিত DOM ইভেন্টের কারণে এজ কেস এড়িয়ে যায়।

TIP

যদি একটি নেটিভ ইভেন্ট (যেমন, click) emits বিকল্পে সংজ্ঞায়িত করা হয়, তাহলে শ্রোতা এখন শুধুমাত্র কম্পোনেন্ট-নির্গত click ইভেন্ট শুনবে এবং নেটিভ click ইভেন্টে আর সাড়া দিবে না।

Events Validation

প্রপ টাইপ ভ্যালিডেশনের অনুরূপ, একটি নির্গত ইভেন্টকে বৈধ করা যেতে পারে যদি এটি অ্যারে সিনট্যাক্সের পরিবর্তে অবজেক্ট সিনট্যাক্স দিয়ে সংজ্ঞায়িত করা হয়।

বৈধতা যোগ করতে, ইভেন্টটিকে একটি ফাংশন বরাদ্দ করা হয় যা this.$emitemit-এ পাস করা আর্গুমেন্টগুলি গ্রহণ করে কল করে এবং ইভেন্টটি বৈধ কিনা তা নির্দেশ করতে একটি বুলিয়ান ফেরত দেয়।

vue
<script setup>
const emit = defineEmits({
  // No validation
  click: null,

  // Validate submit event
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>
js
export default {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}
Component Events has loaded