Jassif Team Institution

Vue Props

প্রপস হল Vue-তে একটি কনফিগারেশন বিকল্প।

আপনি প্রপসের সাথে কম্পোনেন্ট ট্যাগে কাস্টম অ্যাট্রিবিউট পাস করে কম্পোনেন্টে ডেটা পাঠাতে পারেন।

Pass Data To a Component

আগের পৃষ্ঠার উদাহরণটি মনে রাখবেন যেখানে তিনটি উপাদানই 'অ্যাপল' বলেছে? প্রপসের সাহায্যে আমরা এখন আমাদের উপাদানগুলিতে ডেটা পাঠাতে পারি, তাদের বিভিন্ন বিষয়বস্তু দিতে পারি এবং তাদের আলাদা দেখতে পারি।

'আপেল', 'পিজ্জা' এবং 'রাইস' প্রদর্শনের জন্য একটি সাধারণ পৃষ্ঠা তৈরি করা যাক।

মূল অ্যাপ্লিকেশন ফাইল App.vue-এ, <food-item/> উপাদান ট্যাগগুলির সাথে একটি প্রপ পাস করার জন্য আমরা আমাদের নিজস্ব বৈশিষ্ট্য 'food-name' তৈরি করি:

<template>
  <h1>Food</h1>
  <food-item food-name="Apples"/>
  <food-item food-name="Pizza"/>
  <food-item food-name="Rice"/>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    width: 120px;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Receive Data Inside a Component

App.vue 'food-item' , 'props' . , *.vue , props .

<script>
  export default {
    props: [
      'foodName'
    ]
  }
</script>

প্রপস অ্যাট্রিবিউটগুলি <টেমপ্লেট> ট্যাগে একটি হাইফেন দিয়ে লেখা হয় - শব্দগুলিকে আলাদা করতে (কাবুব-কেস), কিন্তু জাভাস্ক্রিপ্টে কাবুব-কেস বৈধ নয়। সুতরাং পরিবর্তে আপনাকে জাভাস্ক্রিপ্টে ক্যামেল কেসে অ্যাট্রিবিউটের নাম লিখতে হবে এবং Vue এটি স্বয়ংক্রিয়ভাবে বুঝতে পারে!

অবশেষে, 'Apples', 'Pizza' এবং 'Rice'-এর জন্য <div> উপাদানগুলির সাথে আমাদের উদাহরণটি এরকম দেখাচ্ছে:

App.vue:
<template>
  <h1>Food</h1>
  <food-item food-name="Apples"/>
  <food-item food-name="Pizza"/>
  <food-item food-name="Rice"/>
</template>

FoodItem.vue:
<template>
  <div>
    <h2>{{ foodName }}</h2>
  </div>
</template>

<script>
  export default {
    props: [
      'foodName'
    ]
  }
</script>

<style></style>

আমরা শীঘ্রই প্রপ অ্যাট্রিবিউট হিসাবে উপাদানগুলিতে বিভিন্ন ডেটা প্রকারগুলি কীভাবে পাস করতে হয় তা দেখব, তবে তার আগে, আসুন প্রতিটি ধরণের খাবারের বিবরণ সহ আমাদের কোডটি প্রসারিত করি এবং একটি ফ্লেক্সবক্স র্যাপারের ভিতরে খাদ্য <div> উপাদান রাখুন।

App.vue:
<template>
  <h1>Food</h1>
  <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-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."/>
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat."/>
  </div>
</template>

<script></script>

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

FoodItem.vue:
<template>
  <div>
    <h2>{{ foodName }}</h2>
    <p>{{ foodDesc }}</p>
  </div>
</template>

<script>
  export default {
    props: [
      'foodName',
      'foodDesc'
    ]
  }
</script>

<style></style>

Boolean Props

বিভিন্ন ধরনের ডেটার প্রপস পাস করে এবং App.vue থেকে উপাদান তৈরি করার সময় বৈশিষ্ট্যগুলি কীভাবে রেন্ডার করা হয় তার নিয়ম নির্ধারণ করে বিভিন্ন কার্যকারিতা অর্জন করা যেতে পারে।

এর একটি নতুন প্রপ 'isFavorite' যোগ করা যাক। এটি সত্য বা মিথ্যা মান সহ একটি বুলিয়ান প্রপ হওয়া উচিত যাতে এটি একটি প্রিয় লেবেল <img> ট্যাগ প্রদর্শন করতে সরাসরি v-show এর সাথে ব্যবহার করা যেতে পারে যদি খাবারটিকে একটি প্রিয় হিসাবে বিবেচনা করা হয়।

স্ট্রিং-এ একটি ভিন্ন ডাটা টাইপের প্রপস পাস করতে, আমাদের লিখতে হবে v-bind: অ্যাট্রিবিউটের সামনে যা আমরা পাস করতে চাই।

আমরা App.vue থেকে 'is-favorite' অ্যাট্রিবিউটে বুলিয়ান 'isFavorite' প্রপ পাস করি:

App.vue:
<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true"/>
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false"/>
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat."
      v-bind:is-favorite="false"/>
  </div>
</template>

FoodItem.vue 'isFavorite' prop :

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="isFavorite">
    </h2>
    <p>{{ foodDesc }}</p>
  </div>
</template>

<script>
  export default {
      props: ['foodName','foodDesc','isFavorite']
  }
</script>

<style>
  img {
    height: 1.5em;
    float: right;
  }
</style>

Props Interface

উপরের উদাহরণে, FoodItem.vue-এর ভিতরে কোডের উপর ভিত্তি করে, আমরা নিশ্চিত হতে পারি না যে আমরা 'isFavorite' প্রপ পাচ্ছি, এবং আমরা নিশ্চিত হতে পারি না যে এটি একটি বুলিয়ান মান কিনা। এতে আমাদের সাহায্য করার জন্য, আমরা প্রাপ্ত প্রপগুলির ডেটা-টাইপ সংজ্ঞায়িত করতে পারি, প্রয়োজনীয় প্রপগুলি সেট করতে পারি এবং আমরা প্রাপ্ত প্রপগুলিকে যাচাই করার জন্য বৈধকরণ ফাংশনগুলি সম্পাদন করতে পারি৷

আমরা যে প্রপগুলি পাই তা সংজ্ঞায়িত করা অন্যদের জন্য একটি দলিল হিসাবে কাজ করবে যদি একটি দলে কাজ করে এবং আমরা যে নিয়মগুলি সংজ্ঞায়িত করি তা লঙ্ঘন করা হলে কনসোলে সতর্কতা জারি করবে৷

Props as an Object

FoodItem.vue , props , props . prop prop , :

<script>
  export default {
    // props: ['foodName','foodDesc','isFavorite']
    props: {
      foodName: String,
      foodDesc: String,
      isFavorite: Boolean
    }
  }
</script>

এইভাবে সংজ্ঞায়িত প্রপস সহ, অন্যরা FoodItem.vue এর ভিতরে দেখতে পারে এবং সহজেই দেখতে পারে যে উপাদানটি কী প্রত্যাশা করে।

যদি একটি উপাদান একটি অভিভাবক উপাদান থেকে তৈরি করা হয় (আমাদের ক্ষেত্রে App.vue) এবং ভুল ডেটা টাইপ সহ একটি প্রপ দেওয়া হয়, আমরা কনসোলে একটি সতর্কতা পাব, যেমন:

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

Required Props

Vue কে জানাতে যে একটি প্রপ প্রয়োজন, প্রপটিকে অবশ্যই একটি অবজেক্ট হিসাবে সংজ্ঞায়িত করতে হবে। আসুন প্রপ 'foodName'কে ঐচ্ছিক করে তুলি, যেমন:

<script>
  export default {
    // props: ['foodName','foodDesc','isFavorite']
    props: {
      foodName: {
        type: String,
        required: true
      },
      foodDesc: String,
      isFavorite: Boolean
    }
  }
</script>

যদি একটি উপাদান একটি অভিভাবক উপাদান থেকে তৈরি করা হয় (আমাদের ক্ষেত্রে App.vue) এবং একটি প্রয়োজনীয় প্রপ সংজ্ঞায়িত না করা হয়, তাহলে আপনি কনসোলে একটি সতর্কতা পাবেন, যেমন:

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

Default Value

আপনি একটি প্রপের জন্য একটি ডিফল্ট মান সেট করতে পারেন।

আসুন 'FoodDesc' এলিমেন্টে 'foodDesc' প্রপের জন্য একটি ডিফল্ট মান তৈরি করি, তারপর 'foodDesc' প্রপকে সংজ্ঞায়িত না করেই ভাতের জন্য একটি আইটেম তৈরি করি:

App.vue:
<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true"/>
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false"/>
    <food-item
      food-name="Rice"
      v-bind:is-favorite="false"/>
  </div>
</template>

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

Props Validator Function

আপনি একটি বৈধতা ফাংশন সংজ্ঞায়িত করতে পারেন যা সিদ্ধান্ত নেয় প্রপ মানটি বৈধ কিনা।

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

ধরা যাক খাবারের বর্ণনা একটি নির্দিষ্ট দৈর্ঘ্যের হতে হবে, 20 থেকে 50 অক্ষরের মধ্যে। সরবরাহকৃত খাবারের বিবরণের একটি বৈধ দৈর্ঘ্য রয়েছে তা নিশ্চিত করতে একটি বৈধতা ফাংশন যোগ করা যেতে পারে।

<script>
  export default {
    props: {
      foodName: {
        type: String,
        required: true
      },
      foodDesc: {
        type: String,
        required: false,
        default: 'This is the default description.',
        validator: function(value) {
          if( 20<value.length && value.length<50 ) {
            return true;
          }
          else {
            return false;
          }
        }
      },
      isFavorite: {
        type: Boolean,
        required: false,
        default: false
      }
    }
  }
</script>

Modify Props

একটি উপাদানকে শিশু উপাদানে উত্তরাধিকারসূত্রে প্রাপ্ত প্রপের মান পরিবর্তন করার অনুমতি দেওয়া হয় না যখন এটি পিতামাতার উপাদানে তৈরি হয়। তাই FoodItem.vue-এর ভিতরে আমরা 'isFavorite' প্রপের মান পরিবর্তন করতে পারি না যা আমরা App.vue থেকে পাই। আমাদের ক্ষেত্রে App.vue-এ, অভিভাবকের কাছ থেকে prop শুধুমাত্র পঠনযোগ্য।

কিন্তু ধরুন ব্যবহারকারী একটি বোতামে ক্লিক করে কোন খাবারটিকে প্রিয় বলে মনে করা হয় তা পরিবর্তন করতে পারেন। এখন 'isFavorite' প্রপ পরিবর্তন করার প্রয়োজন আছে, কিন্তু যেহেতু এটি শুধুমাত্র পঠনযোগ্য আমরা তা করতে পারি না।

'isFavorite' পরিবর্তন করা অনুমোদিত নয়। এটি একটি ত্রুটি তৈরি করবে।

methods: {
  toggleFavorite() { 
    this.isFavorite = !this.isFavorite;
  }
}

এর চারপাশে আমরা একটি নতুন ডেটা মান 'foodIsFavorite' শুরু করতে প্রপ ব্যবহার করতে পারি, FoodItem.vue-এর ভিতরে, এইরকম:

data() {
  return { 
    foodIsFavorite: this.isFavorite
  }
}

এখন ব্যবহারকারী একটি পদ্ধতি যোগ করতে পারেন যা এই নতুন ডেটা মান পরিবর্তন করে:

methods: {
  toggleFavorite() { 
    this.foodIsFavorite = !this.foodIsFavorite;
  }
}

প্রতিটি খাদ্য আইটেমের জন্য একটি টগল বোতাম যোগ করুন, এবং নতুন ডেটা বৈশিষ্ট্য 'foodIsFavorite'-এর উপর নির্ভর করে <img> ট্যাগে v-শো পরিবর্তন করুন। এবং আমাদের উদাহরণ সহজ করার জন্য আমরা প্রপস ঘোষণাকে শুধুমাত্র একটি সারিতে কমিয়ে দিই।

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="foodIsFavorite">
    </h2>
    <p>{{ foodDesc }}</p>
    <button v-on:click="toggleFavorite">Favorite</button>
  </div>
</template>

<script>
export default {
  props: ['foodName','foodDesc','isFavorite'],
  data() {
    return {
      foodIsFavorite: this.isFavorite
    }
  },
  methods: {
    toggleFavorite() {
      this.foodIsFavorite = !this.foodIsFavorite;
    }
  }
};
</script>

<style>
  img {
    height: 1.5em;
    float: right;
  }
</style>

Vue Exercises

App.vue 'fish-name' prop ?

<script>
  export default {
    ______: [
      '______'
    ]
  }
</script>