Props ​

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

Props Declaration ​

Vue কম্পোনেন্টগুলির সুস্পষ্ট প্রপস ঘোষণার প্রয়োজন যাতে Vue জানে যে কোন বাহ্যিক প্রপগুলি কম্পোনেন্টে পাস করা হয়েছে তাকে ফলথ্রু বৈশিষ্ট্য হিসাবে গণ্য করা উচিত (যা এই বিভাগে) এ আলোচনা করা হবে৷

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

export default {
  props: ['foo'],
  setup(props) {
    // setup() receives props as the first argument.
    console.log(props.foo)
  }
}

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

স্ট্রিংগুলির একটি অ্যারে ব্যবহার করে প্রপস ঘোষণা করার পাশাপাশি, আমরা অবজেক্ট সিনট্যাক্সও ব্যবহার করতে পারি:

export default {
  props: {
    title: String,
    likes: Number
  }
}

// in <script setup>
defineProps({
  title: String,
  likes: Number
})

// in non-<script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

অবজেক্ট ডিক্লারেশন সিনট্যাক্সের প্রতিটি প্রপার্টির জন্য, কী হল প্রপের নাম, যখন মানটি প্রত্যাশিত ধরনের কনস্ট্রাক্টর ফাংশন হওয়া উচিত।

এটি শুধুমাত্র আপনার কম্পোনেন্ট নথিভুক্ত করে না, তবে অন্য ডেভেলপারদেরও সতর্ক করবে ব্রাউজার কনসোলে আপনার কম্পোনেন্ট ব্যবহার করে যদি তারা ভুল টাইপ পাস করে। আমরা এই পৃষ্ঠার আরও নিচে prop validation সম্পর্কে আরও বিস্তারিত আলোচনা করব।

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

Prop Passing Details ​

Prop Name Casing ​

আমরা camelCase ব্যবহার করে দীর্ঘ প্রপ নাম ঘোষণা করি কারণ এটি প্রপার্টি কী হিসাবে ব্যবহার করার সময় উদ্ধৃতিগুলি ব্যবহার করা এড়িয়ে যায় এবং আমাদেরকে সরাসরি টেমপ্লেট এক্সপ্রেশনে তাদের উল্লেখ করার অনুমতি দেয় কারণ তারা বৈধ জাভাস্ক্রিপ্ট শনাক্তকারী:

defineProps({
  greetingMessage: String
})

export default {
  props: {
    greetingMessage: String
  }
}

<span>{{ greetingMessage }}</span>

টেকনিক্যালি, আপনি চাইল্ড কম্পোনেন্টে প্রপস দেওয়ার সময় ক্যামেলকেস ব্যবহার করতে পারেন (except in in-DOM templates)। যাইহোক, কনভেনশন এইচটিএমএল বৈশিষ্ট্যের সাথে সারিবদ্ধ করার জন্য সব ক্ষেত্রে কাবাব-কেস ব্যবহার করছে:

<MyComponent greeting-message="hello" />

আমরা যখনই সম্ভব কম্পোনেন্ট ট্যাগের জন্য PascalCase ব্যবহার করি কারণ এটি Vue কম্পোনেন্টগুলিকে নেটিভ কম্পোনেন্ট থেকে আলাদা করে টেমপ্লেট পাঠযোগ্যতা উন্নত করে। যাইহোক, প্রপস পাস করার সময় ক্যামেলকেস ব্যবহার করার মতো ব্যবহারিক সুবিধা নেই, তাই আমরা প্রতিটি ভাষার নিয়ম অনুসরণ করা বেছে নিই।

Static vs. Dynamic Props ​

এখনও অবধি, আপনি প্রপগুলিকে স্ট্যাটিক মান হিসাবে পাস করতে দেখেছেন, যেমন:

<BlogPost title="My journey with Vue" />

আপনি v-bind বা এর : শর্টকাটের সাথে গতিশীলভাবে বরাদ্দ করা প্রপসও দেখেছেন, যেমন:

<!-- Dynamically assign the value of a variable -->
<BlogPost :title="post.title" />

<!-- Dynamically assign the value of a complex expression -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

Passing Different Value Types ​

উপরের দুটি উদাহরণে, আমরা স্ট্রিং মান পাস করি, কিন্তু যেকোনো ধরনের মান একটি প্রপে পাস করা যেতে পারে।

Number ​

<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.       -->
<BlogPost :likes="42" />

<!-- Dynamically assign to the value of a variable. -->
<BlogPost :likes="post.likes" />

Boolean ​

<!-- Including the prop with no value will imply `true`. -->
<BlogPost is-published />

<!-- Even though `false` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.          -->
<BlogPost :is-published="false" />

<!-- Dynamically assign to the value of a variable. -->
<BlogPost :is-published="post.isPublished" />

Array ​

<!-- Even though the array is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.            -->
<BlogPost :comment-ids="[234, 266, 273]" />

<!-- Dynamically assign to the value of a variable. -->
<BlogPost :comment-ids="post.commentIds" />

Object ​

<!-- Even though the object is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.             -->
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- Dynamically assign to the value of a variable. -->
<BlogPost :author="post.author" />

Binding Multiple Properties Using an Object ​

আপনি যদি একটি অবজেক্টর সমস্ত বৈশিষ্ট্যকে প্রপ হিসাবে পাস করতে চান তবে আপনি যুক্তি ছাড়াই v-bind ব্যবহার করতে পারেন (v-bind `` এর পরিবর্তে :প্রপ-নাম`)। উদাহরণস্বরূপ, একটি 'পোস্ট' অবজেক্ট দেওয়া হয়েছে:

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}

const post = {
  id: 1,
  title: 'My Journey with Vue'
}

নিম্নলিখিত টেমপ্লেট:

<BlogPost v-bind="post" />

এর সমতুল্য হবে:

<BlogPost :id="post.id" :title="post.title" />

One-Way Data Flow ​

সমস্ত প্রপস চাইল্ড কম্পিউটেড প্রপার্টি এবং পিতামাতার মধ্যে একটি ওয়ান-ওয়ে-ডাউন বাইন্ডিং গঠন করে: যখন পিতামাতার কম্পিউটেড প্রপার্টি আপডেট হয়, তখন এটি সন্তানের কাছে প্রবাহিত হবে, তবে অন্যভাবে নয়। এটি চাইল্ডর কম্পোনেন্টগুলিকে দুর্ঘটনাক্রমে পিতামাতার অবস্থা পরিবর্তন করতে বাধা দেয়, যা আপনার অ্যাপের ডেটা প্রবাহকে বোঝা কঠিন করে তুলতে পারে।

উপরন্তু, প্রতিবার অভিভাবক কম্পোনেন্ট আপডেট করা হয়, চাইল্ড কম্পোনেন্টের সমস্ত প্রপস সর্বশেষ মান সহ রিফ্রেশ করা হবে। এর মানে হল আপনার চাইল্ড কম্পোনেন্টের ভিতরে প্রপ মিউটেট করার চেষ্টা না করা উচিত। আপনি যদি তা করেন, Vue আপনাকে কনসোলে সতর্ক করবে:

const props = defineProps(['foo'])

// ❌ warning, props are readonly!
props.foo = 'bar'

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

সাধারণত দুটি ক্ষেত্রে এটি একটি প্রপ পরিবর্তন করতে প্রলুব্ধ করে:

1. প্রপটি একটি প্রাথমিক মান পাস করতে ব্যবহৃত হয়; চাইল্ড কম্পোনেন্ট এটিকে পরবর্তীতে একটি স্থানীয় ডেটা কম্পিউটেড প্রপার্টি হিসাবে ব্যবহার করতে চায়। এই ক্ষেত্রে, একটি স্থানীয় ডেটা কম্পিউটেড প্রপার্টি সংজ্ঞায়িত করা ভাল যা প্রারম্ভিক মান হিসাবে প্রপ ব্যবহার করে:

   js

   const props = defineProps(['initialCounter'])
   
   // counter only uses props.initialCounter as the initial value;
   // it is disconnected from future prop updates.
   const counter = ref(props.initialCounter)

   js

   export default {
     props: ['initialCounter'],
     data() {
       return {
         // counter only uses this.initialCounter as the initial value;
         // it is disconnected from future prop updates.
         counter: this.initialCounter
       }
     }
   }

2. প্রপটি একটি raw মান হিসাবে পাস করা হয়েছে যা রূপান্তরিত করা দরকার। এই ক্ষেত্রে, প্রপের মান ব্যবহার করে একটি গণনা করা কম্পিউটেড প্রপার্টি সংজ্ঞায়িত করা ভাল:

   js

   const props = defineProps(['size'])
   
   // computed property that auto-updates when the prop changes
   const normalizedSize = computed(() => props.size.trim().toLowerCase())

   js

   export default {
     props: ['size'],
     computed: {
       // computed property that auto-updates when the prop changes
       normalizedSize() {
         return this.size.trim().toLowerCase()
       }
     }
   }

Mutating Object / Array Props ​

যখন অবজেক্ট এবং অ্যারেগুলিকে প্রপ হিসাবে পাস করা হয়, যখন চাইল্ড কম্পোনেন্ট প্রপ বাইন্ডিংকে পরিবর্তন করতে পারে না, তখন এটি অবজেক্ট বা অ্যারের নেস্টেড বৈশিষ্ট্যগুলিকে পরিবর্তিত করতে সক্ষম হবে। এর কারণ হল জাভাস্ক্রিপ্টে অবজেক্ট এবং অ্যারে রেফারেন্স দ্বারা পাস করা হয় এবং এই ধরনের মিউটেশন প্রতিরোধ করা Vue-এর জন্য অযৌক্তিকভাবে ব্যয়বহুল।

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

Prop Validation ​

উপাদানগুলি তাদের প্রপসের জন্য প্রয়োজনীয়তা নির্দিষ্ট করতে পারে, যেমন আপনি ইতিমধ্যে দেখেছেন প্রকারগুলি। কোনো প্রয়োজন পূরণ না হলে, Vue আপনাকে ব্রাউজারের JavaScript কনসোলে সতর্ক করবে। অন্যদের দ্বারা ব্যবহার করার উদ্দেশ্যে এমন একটি কম্পোনেন্ট তৈরি করার সময় এটি বিশেষভাবে কার্যকর।

প্রপ যাচাইকরণ নির্দিষ্ট করতে, আপনি defineProps() macroprops বিকল্পতে বৈধকরণের প্রয়োজনীয়তা সহ একটি অবজেক্ট প্রদান করতে পারেন , স্ট্রিংগুলির একটি অ্যারের পরিবর্তে। উদাহরণ স্বরূপ:

defineProps({
  // Basic type check
  //  (`null` and `undefined` values will allow any type)
  propA: Number,
  // Multiple possible types
  propB: [String, Number],
  // Required string
  propC: {
    type: String,
    required: true
  },
  // Number with a default value
  propD: {
    type: Number,
    default: 100
  },
  // Object with a default value
  propE: {
    type: Object,
    // Object or array defaults must be returned from
    // a factory function. The function receives the raw
    // props received by the component as the argument.
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // Custom validator function
  // full props passed as 2nd argument in 3.4+
  propF: {
    validator(value, props) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // Function with a default value
  propG: {
    type: Function,
    // Unlike object or array default, this is not a factory 
    // function - this is a function to serve as a default value
    default() {
      return 'Default function'
    }
  }
})

export default {
  props: {
    // Basic type check
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function. The function receives the raw
      // props received by the component as the argument.
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    // full props passed as 2nd argument in 3.4+
    propF: {
      validator(value, props) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // Function with a default value
    propG: {
      type: Function,
      // Unlike object or array default, this is not a factory 
      // function - this is a function to serve as a default value
      default() {
        return 'Default function'
      }
    }
  }
}

অতিরিক্ত বিস্তারিত:

• সমস্ত প্রপস ডিফল্টরূপে ঐচ্ছিক, যদি না required: true নির্দিষ্ট করা হয়।

• Boolean ব্যতীত একটি অনুপস্থিত ঐচ্ছিক প্রপ হবে undefined মান।

• Boolean অনুপস্থিত প্রপগুলিকে false তে নিক্ষেপ করা হবে। আপনি এটির জন্য একটি default সেট করে এটি পরিবর্তন করতে পারেন — যেমন: default: undefined একটি নন-বুলিয়ান প্রপ হিসাবে আচরণ করতে।

• যদি একটি default মান নির্দিষ্ট করা থাকে, তাহলে এটি ব্যবহার করা হবে যদি সমাধানকৃত প্রপ মান undefined হয় - এতে প্রপ অনুপস্থিত থাকলে বা একটি সুস্পষ্ট undefined মান পাস হলে উভয়ই অন্তর্ভুক্ত থাকে।

যখন প্রপ বৈধতা ব্যর্থ হয়, Vue একটি কনসোল সতর্কতা তৈরি করবে (যদি development বিল্ড ব্যবহার করে)।

Runtime Type Checks ​

type নিম্নলিখিত নেটিভ কনস্ট্রাক্টরগুলির মধ্যে একটি হতে পারে:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

এছাড়াও, type একটি কাস্টম ক্লাস বা কনস্ট্রাক্টর ফাংশনও হতে পারে এবং দাবিটি instanceof চেকের মাধ্যমে করা হবে। উদাহরণস্বরূপ, নিম্নলিখিত ক্লাস দেওয়া:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

আপনি এটি একটি প্রপের প্রকার হিসাবে ব্যবহার করতে পারেন:

defineProps({
  author: Person
})

export default {
  props: {
    author: Person
  }
}

author প্রপের মান প্রকৃতপক্ষে Person শ্রেণীর একটি উদাহরণ কিনা তা যাচাই করতে Vue instanceof Person ব্যবহার করবে।

Boolean Casting ​

Boolean টাইপের প্রপগুলিতে নেটিভ বুলিয়ান অ্যাট্রিবিউটের আচরণ অনুকরণ করার জন্য বিশেষ কাস্টিং নিয়ম রয়েছে৷ নিম্নলিখিত ঘোষণার সাথে একটি <MyComponent> দেওয়া হয়েছে:

defineProps({
  disabled: Boolean
})

export default {
  props: {
    disabled: Boolean
  }
}

component এই মত ব্যবহার করা যেতে পারে:

<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />

যখন একাধিক প্রকারের অনুমতি দেওয়ার জন্য একটি প্রপ ঘোষণা করা হয়, তখন Boolean এর জন্য কাস্টিং নিয়মগুলিও প্রয়োগ করা হবে। যাইহোক, একটি প্রান্ত আছে যখন String এবং Boolean উভয়ই অনুমোদিত - বুলিয়ান কাস্টিং নিয়ম শুধুমাত্র তখনই প্রযোজ্য হয় যদি স্ট্রিং-এর আগে বুলিয়ান উপস্থিত হয়:

// disabled will be casted to true
defineProps({
  disabled: [Boolean, Number]
})
  
// disabled will be casted to true
defineProps({
  disabled: [Boolean, String]
})
  
// disabled will be casted to true
defineProps({
  disabled: [Number, Boolean]
})
  
// disabled will be parsed as an empty string (disabled="")
defineProps({
  disabled: [String, Boolean]
})

// disabled will be casted to true
export default {
  props: {
    disabled: [Boolean, Number]
  }
}
  
// disabled will be casted to true
export default {
  props: {
    disabled: [Boolean, String]
  }
}
  
// disabled will be casted to true
export default {
  props: {
    disabled: [Number, Boolean]
  }
}
  
// disabled will be parsed as an empty string (disabled="")
export default {
  props: {
    disabled: [String, Boolean]
  }
}