Jassif Team Institution

Vue 'emits' Option

উপাদান থেকে নির্গত কাস্টম ইভেন্ট ঘোষণা করতে emits বিকল্প ব্যবহার করে.

Example

export default {
  emits: ['custom-event'],
  methods: {
    notifyParent() {
      this.$emit('custom-event','Hello! ')
    }
  }
}

নীচে আরো উদাহরণ দেখুন

সংজ্ঞা এবং প্রয়োগ

ইমিট অপশনটি কোন কাস্টম ইভেন্ট কোন উপাদান নির্গত করে তা নথিভুক্ত করতে ব্যবহৃত হয়।

ইমিট বিকল্পের প্রয়োজন নেই, যার অর্থ হল একটি উপাদান ইমিট বিকল্পের মধ্যে সংজ্ঞায়িত না করে ইভেন্ট নির্গত করতে পারে।

যদিও ইমিট বিকল্পের প্রয়োজন নেই, তবুও এটি রাখার সুপারিশ করা হয় যাতে অন্যান্য প্রোগ্রামাররা সহজেই দেখতে পারে যে উপাদানটি কী নির্গত করে।

যদি emits অপশনটি একটি অ্যারে হিসাবে দেওয়া হয়, তাহলে অ্যারেটিতে emits নামগুলি স্ট্রিং হিসাবে থাকে। (উপরে উদাহরণ দেখুন।)

যদি ইমিট অপশনটি একটি অবজেক্ট হিসাবে দেওয়া হয়, তাহলে অ্যাট্রিবিউটের নামটি একটি ইমিট নাম, এবং যদি এটির একটি বৈধ ফাংশন থাকে তবে মানটি 'নাল', অথবা যদি এমিটের কোনো বৈধ ফাংশন না থাকে তবে 'নাল'। (নীচের উদাহরণ দেখুন।)

আরো উদাহরণ

Example

অপশন সহ অবজেক্ট হিসাবে প্রপ ব্যবহার করা যাতে প্যারেন্ট কম্পোনেন্ট একটি প্রদান না করলে একটি ডিফল্ট খাদ্য বিবরণ প্রদর্শিত হয়।

<template>
    <div>
        <h2>{{ foodName }}</h2>
        <p>{{ foodDesc }}</p>
    </div>
</template>

<script>
export default {
    props: {
        foodName: {
            type: String,
            required: true
        },
        foodDesc: {
            type: String,
            required: false,
            default: 'This is the food description...'
        }
    }
};
</script>

<template>
  <h1>Food</h1>
  <p>Food description is not provided for 'Pizza' and 'Rice', so the default description is used.</p>
  <div id="wrapper">
    <food-item 
      food-name="Apples" 
      food-desc="Apples are a type of fruit that grow on trees."/>
    <food-item 
      food-name="Pizza"/>
    <food-item 
      food-name="Rice"/>
  </div> 
</template>

<style>
  #wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  #wrapper > div {
    border: dashed black 1px;
    flex-basis: 120px;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

ভিউ এমিট টিউটোরিয়াল

এই টিউটোরিয়ালে ব্যাখ্যা যাচাই করতে পারে এমন অনুশীলন করুন।

সম্পর্কিত পাতা