Component Events ​

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

Emitting and Listening to Events ​

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

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

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

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

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

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

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

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

Event Arguments ​

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

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

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

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

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

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

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

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

function increaseCount(n) {
  count.value += n
}

Declaring Emitted Events ​

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

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

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

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

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

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

export default {
  emits: ['inFocus', 'submit']
}

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

<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 lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

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

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

Events Validation ​

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

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

<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>

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 })
    }
  }
}