কম্পোনেন্টস এর মধ্যে ডেটা পাস করা (props)

Vue.js-এ কম্পোনেন্টসের মধ্যে ডেটা শেয়ার করার জন্য props ব্যবহৃত হয়। props হল একটি পদ্ধতি যার মাধ্যমে প্যারেন্ট কম্পোনেন্ট তার চাইল্ড কম্পোনেন্টে ডেটা বা প্যারামিটার পাঠাতে পারে। এটি ডেটা স্ট্রাকচার বা ইনপুট হিসেবে চাইল্ড কম্পোনেন্টের মধ্যে প্রেরণ করা হয়।

১. Props কী?

Props হল প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের একটি পদ্ধতি। Vue.js-এ props ব্যবহার করে আপনি প্যারেন্ট কম্পোনেন্টের ডেটাকে চাইল্ড কম্পোনেন্টে পাঠাতে পারেন এবং সেই ডেটার উপর ভিত্তি করে চাইল্ড কম্পোনেন্টের কনটেন্ট রেন্ডার করতে পারেন।

২. Props ব্যবহার করার ধাপ

প্যারেন্ট কম্পোনেন্টে Props প্রেরণ:

ধরা যাক আমাদের একটি প্যারেন্ট কম্পোনেন্ট আছে, যেখানে একটি চাইল্ড কম্পোনেন্টে কিছু ডেটা পাঠাতে হবে। এর জন্য প্যারেন্ট কম্পোনেন্টে props ডিফাইন করা হয়।

Parent.vue (প্যারেন্ট কম্পোনেন্ট):

<template>
  <div>
    <h1>Welcome to Vue.js</h1>
    <!-- Child কম্পোনেন্টে 'message' প্রপস পাঠানো হচ্ছে -->
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from Parent!"
    };
  }
};
</script>

• এখানে, প্যারেন্ট কম্পোনেন্ট ChildComponent-কে message নামে একটি prop পাঠাচ্ছে, যার মান parentMessage।
• :message="parentMessage" সিনট্যাক্সে : ব্যবহার করলে এটি একটি বাইন্ডিং হিসেবে কাজ করে, যার মাধ্যমে ডেটা ডাইনামিকভাবে পাস করা হয়।

চাইল্ড কম্পোনেন্টে Props গ্রহণ:

চাইল্ড কম্পোনেন্টে প্রাপ্ত props কে props অপশন ব্যবহার করে গ্রহণ করতে হয়। এই অপশনে আপনি props এর নাম এবং টাইপ নির্ধারণ করতে পারেন।

ChildComponent.vue (চাইল্ড কম্পোনেন্ট):

<template>
  <div>
    <p>{{ message }}</p> <!-- Props এর মান প্রদর্শন -->
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    // props ডিফাইনেশন (অথবা validation)
    message: {
      type: String,
      required: true
    }
  }
};
</script>

• এখানে, ChildComponent কম্পোনেন্টে message নামের prop গ্রহণ করা হয়েছে। এই prop এর মান parentMessage থেকে এসেছে যা প্যারেন্ট কম্পোনেন্টে ডিফাইন করা হয়েছিল।
• props অপশনে আপনি type, required ইত্যাদি বৈশিষ্ট্য উল্লেখ করতে পারেন, যা prop এর ধরন এবং প্রয়োজনীয়তা নির্ধারণ করবে।

৩. Props এর Validation

Vue.js আপনাকে props এর জন্য validation করার সুবিধা দেয়। এটি নিশ্চিত করে যে, প্রাপ্ত ডেটা সঠিক টাইপ এবং ফরম্যাটে আছে। আপনি type, required, default এবং validator বৈশিষ্ট্য ব্যবহার করতে পারেন।

Props Validation Example:

props: {
  message: {
    type: String,
    required: true,
    default: 'Hello, World!',
    validator(value) {
      // value শুধুমাত্র 'Hello' অথবা 'Hi' হতে পারে
      if (value !== 'Hello' && value !== 'Hi') {
        console.error('Invalid message!');
        return false;
      }
      return true;
    }
  }
}

• এখানে, message prop শুধুমাত্র 'Hello' অথবা 'Hi' হতে পারবে। যদি অন্য কোনো মান পাস করা হয়, তাহলে কনসোলের মাধ্যমে একটি ত্রুটি দেখানো হবে।

৪. Props এর Default মান

যদি প্যারেন্ট কম্পোনেন্ট থেকে কোনো prop পাস না করা হয়, তবে আপনি চাইল্ড কম্পোনেন্টে default মান সেট করতে পারেন।

props: {
  message: {
    type: String,
    default: 'No message passed'
  }
}

• এখানে, যদি প্যারেন্ট কম্পোনেন্ট থেকে message prop না পাঠানো হয়, তবে চাইল্ড কম্পোনেন্টে 'No message passed' ডিফল্ট মান হিসেবে দেখানো হবে।

৫. Props এর ডেটা পরিবর্তন করা

Important: Vue.js-এ props শুধু read-only হয়। চাইল্ড কম্পোনেন্টে props এর ডেটা সরাসরি পরিবর্তন করা উচিত নয়। যদি আপনি props এর ডেটা পরিবর্তন করতে চান, তবে সেটি স্থানীয় (local) ডেটায় কপি করে কাজ করতে হবে।

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
    <p>{{ localMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // Props এর কপি হিসাবে স্থানীয় ডেটা
      localMessage: this.message
    };
  },
  methods: {
    changeMessage() {
      this.localMessage = 'New message from Child'; // localMessage পরিবর্তন
    }
  }
};
</script>

• এখানে, চাইল্ড কম্পোনেন্ট localMessage নামে একটি স্থানীয় ডেটা ব্যবহার করছে, যা প্রথমে props থেকে কপি করা হয়েছে। এরপর এটি পরিবর্তন করা হচ্ছে, কারণ props এর মান সরাসরি পরিবর্তন করা উচিত নয়।

সারাংশ

• Props হল Vue.js-এ প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের পদ্ধতি।
• এটি props অপশন দ্বারা চাইল্ড কম্পোনেন্টে গ্রহণ করা হয়।
• Props-এর মাধ্যমে ডেটা পাঠানোর সময় আপনি টাইপ, প্রয়োজনীয়তা, ডিফল্ট মান এবং ভ্যালিডেশন নির্ধারণ করতে পারেন।
• Props শুধুমাত্র read-only, অর্থাৎ চাইল্ড কম্পোনেন্টে props-এর ডেটা পরিবর্তন করা উচিত নয়।