Vue.js কম্পোনেন্টস

Vue.js একটি কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্ক, যার মাধ্যমে অ্যাপ্লিকেশনগুলো ছোট ছোট, পুনঃব্যবহারযোগ্য ব্লক বা কম্পোনেন্টে বিভক্ত করা হয়। এই কম্পোনেন্টগুলো অ্যাপ্লিকেশনের UI (User Interface) তৈরি করতে ব্যবহৃত হয় এবং প্রতিটি কম্পোনেন্ট সাধারণত HTML, CSS এবং JavaScript এর সংমিশ্রণ হিসেবে থাকে।

Vue.js কম্পোনেন্টগুলোর প্রধান সুবিধা হল কোডের পুনঃব্যবহারযোগ্যতা, স্কেলেবিলিটি এবং ম্যানেজেবল সিস্টেম তৈরি করা।

১. Vue কম্পোনেন্টের মৌলিক গঠন

একটি Vue কম্পোনেন্ট সাধারণত তিনটি প্রধান অংশে বিভক্ত থাকে:

• Template: HTML অংশ যা UI এর কাঠামো নির্ধারণ করে।
• Script: JavaScript অংশ যা কম্পোনেন্টের লজিক এবং ডেটা পরিচালনা করে।
• Style: CSS অংশ যা কম্পোনেন্টের স্টাইলিং বা ডিজাইন সংজ্ঞায়িত করে।

একটি সাধারণ Vue কম্পোনেন্টের গঠন এরকম হতে পারে:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'You clicked the button!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
button {
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

২. কম্পোনেন্টের গুরুত্বপূর্ণ অংশ

Template

<template> ট্যাগে আপনার HTML কোড থাকে যা ব্যবহারকারীর জন্য UI প্রদর্শন করে। Vue.js এর মধ্যে HTML কোড এবং JavaScript এর মধ্যে ডেটা সংযোগ (binding) সম্ভব হয়।

Script

<script> ট্যাগে কম্পোনেন্টের JavaScript কোড থাকে। এখানে আপনি:

• data: কম্পোনেন্টের জন্য ডেটা তৈরি এবং পরিচালনা করতে পারেন।
• methods: ব্যবহারকারী যেকোনো ইন্টারঅ্যাকশনের জন্য ফাংশন বা মেথড তৈরি করতে পারেন।
• props: প্যারেন্ট কম্পোনেন্ট থেকে ডেটা গ্রহণ করতে পারেন।

Style

<style> ট্যাগে CSS কোড থাকে যা UI এর ডিজাইন নিয়ন্ত্রণ করে। Vue.js কম্পোনেন্টের মধ্যে scoped এট্রিবিউট ব্যবহারের মাধ্যমে আপনি CSS স্টাইল এক কম্পোনেন্টে সীমাবদ্ধ রাখতে পারেন, যাতে অন্য কম্পোনেন্টের উপর এর প্রভাব না পড়ে।

৩. কম্পোনেন্ট তৈরি ও ব্যবহার

নতুন কম্পোনেন্ট তৈরি করা

একটি নতুন কম্পোনেন্ট তৈরি করতে, আপনি সাধারণত src/components/ ফোল্ডারের মধ্যে একটি .vue ফাইল তৈরি করবেন। উদাহরণস্বরূপ, HelloWorld.vue কম্পোনেন্ট:

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue.js Developer'
    };
  }
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

কম্পোনেন্ট ব্যবহার করা

একটি কম্পোনেন্ট তৈরি করার পর, আপনি এটি অন্য কোনো কম্পোনেন্টে ব্যবহার করতে পারেন। সাধারণত, আপনার App.vue অথবা অন্য যেকোনো প্যারেন্ট কম্পোনেন্টে এটি ব্যবহার করা হয়।

১. কম্পোনেন্ট ইম্পোর্ট করা: প্রথমে কম্পোনেন্টটি ইম্পোর্ট করতে হবে:

import HelloWorld from './components/HelloWorld.vue';

২. কম্পোনেন্ট রেজিস্টার করা: তারপর প্যারেন্ট কম্পোনেন্টে কম্পোনেন্টটি রেজিস্টার করুন:

export default {
  components: {
    HelloWorld
  }
};

৩. কম্পোনেন্ট ব্যবহার করা: এখন আপনি প্যারেন্ট কম্পোনেন্টের টেমপ্লেটে <HelloWorld /> ট্যাগ ব্যবহার করে কম্পোনেন্টটি রেন্ডার করতে পারবেন:

<template>
  <div>
    <HelloWorld />
  </div>
</template>

৪. কম্পোনেন্টের মধ্যে ডেটা কমিউনিকেশন

Vue.js কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করতে কয়েকটি পদ্ধতি রয়েছে:

Props

Props হচ্ছে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করার উপায়। উদাহরণস্বরূপ:

Parent Component (App.vue):

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

Child Component (ChildComponent.vue):

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

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

Events

Events এর মাধ্যমে চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো যায়। উদাহরণস্বরূপ, একটি বাটনে ক্লিক করলে প্যারেন্ট কম্পোনেন্টে ইভেন্ট ট্রিগার করা:

Child Component (ChildComponent.vue):

<template>
  <button @click="sendMessage">Click me</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send', 'Hello from child!');
    }
  }
};
</script>

Parent Component (App.vue):

<template>
  <div>
    <ChildComponent @send="receiveMessage" />
  </div>
</template>

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

export default {
  methods: {
    receiveMessage(message) {
      alert(message);
    }
  },
  components: {
    ChildComponent
  }
};
</script>

৫. কম্পোনেন্টের আর্কিটেকচার

Vue.js এ কম্পোনেন্ট আর্কিটেকচার গঠন করার সময় আপনি:

• নতুন ফিচার বা পেজের জন্য আলাদা কম্পোনেন্ট তৈরি করুন।
• কম্পোনেন্টগুলিকে ছোট এবং স্পেসিফিক রাখুন, যাতে পুনঃব্যবহারযোগ্য হয়।
• কম্পোনেন্টের মধ্যে লজিক ভাগ করুন, যাতে অ্যাপের স্কেল বাড়ানোর সময় সহজে পরিচালনা করা যায়।

সারাংশ

Vue.js কম্পোনেন্ট একটি অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী ধারণা, যা অ্যাপ্লিকেশনগুলির নির্মাণ প্রক্রিয়াকে অনেক সহজ এবং স্কেলযোগ্য করে তোলে। কম্পোনেন্টগুলো আপনার অ্যাপ্লিকেশনকে ছোট ছোট ইউনিটে ভাগ করতে সাহায্য করে, যার ফলে কোডের রিয়ুসেবিলিটি এবং মেইনটেনেবিলিটি অনেক বৃদ্ধি পায়।

Vue.js কম্পোনেন্ট হল এক ধরনের স্বতন্ত্র, পুনঃব্যবহারযোগ্য ইউনিট যা অ্যাপ্লিকেশনের UI (User Interface) তৈরি করতে ব্যবহৃত হয়। প্রতিটি কম্পোনেন্টের মধ্যে HTML, CSS এবং JavaScript থাকে যা নির্দিষ্ট কার্যাবলী এবং UI উপাদানগুলি পরিচালনা করে। কম্পোনেন্ট ব্যবহার করে আপনি বড় অ্যাপ্লিকেশনগুলিকে ছোট, manageable এবং পুনঃব্যবহারযোগ্য অংশে বিভক্ত করতে পারেন।

কম্পোনেন্ট কী?

কম্পোনেন্ট একটি Vue ফাইল (যার এক্সটেনশন .vue) যা তিনটি মূল অংশ নিয়ে গঠিত:

1. Template (HTML): কম্পোনেন্টের UI এর কাঠামো তৈরি করে।
2. Script (JavaScript): কম্পোনেন্টের লজিক এবং ডেটা পরিচালনা করে।
3. Style (CSS): কম্পোনেন্টের স্টাইলিং এবং লেআউট নিয়ন্ত্রণ করে।

উদাহরণ:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue.js!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "You clicked the button!";
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
button {
  background-color: lightgray;
}
</style>

এখানে একটি সাধারণ Vue কম্পোনেন্ট তৈরি করা হয়েছে যেখানে একটি message ডেটা রয়েছে এবং একটি changeMessage মেথড রয়েছে যা বাটন ক্লিক করার সময় message পরিবর্তন করবে।

কম্পোনেন্টের প্রয়োজনীয়তা

১. কোড পুনঃব্যবহারযোগ্যতা

কম্পোনেন্টের মূল সুবিধা হলো এটি পুনঃব্যবহারযোগ্য। আপনি একবার একটি কম্পোনেন্ট তৈরি করে সেটিকে বিভিন্ন জায়গায় ব্যবহার করতে পারেন, ফলে কোডের পুনরাবৃত্তি কমে যায় এবং কোডিং আরও সহজ হয়।

২. মডুলার অ্যাপ্লিকেশন

Vue.js কম্পোনেন্টের মাধ্যমে আপনি বড় অ্যাপ্লিকেশনগুলো ছোট, স্বাধীন অংশে ভাগ করতে পারেন। প্রতিটি কম্পোনেন্ট আলাদাভাবে কাজ করে এবং আপনি বিভিন্ন ফিচারগুলো আলাদা আলাদা কম্পোনেন্ট হিসেবে ডিজাইন করতে পারেন, যা অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং মেইন্টেইনেবল করে তোলে।

৩. সহজ ডিবাগিং এবং টেস্টিং

কম্পোনেন্ট ভিত্তিক আর্কিটেকচারে প্রতিটি ইউনিট আলাদা কাজ করে। এর ফলে, যদি কোনো সমস্যা হয়, আপনি সহজেই সমস্যাটির উৎস চিহ্নিত করতে পারেন। এছাড়া, ইউনিট টেস্টিংও সহজ হয়, কারণ প্রতিটি কম্পোনেন্টকে আলাদাভাবে টেস্ট করা যায়।

৪. উন্নত কোড অর্গানাইজেশন

কম্পোনেন্টগুলো কোডের কাঠামো পরিষ্কার এবং সুসংগঠিত রাখে। একটি Vue.js অ্যাপ্লিকেশনে শতাধিক কম্পোনেন্ট থাকতে পারে, কিন্তু প্রতিটি কম্পোনেন্টের নিজস্ব ফাইল এবং লজিক থাকে, যা অ্যাপ্লিকেশনটির পরিস্কার এবং ম্যানেজযোগ্য রাখে।

৫. স্টেট ম্যানেজমেন্ট সহজ করা

Vue কম্পোনেন্টে স্টেট ম্যানেজমেন্ট (ডেটা হ্যান্ডলিং) সহজ হয়। Vuex (Vue.js এর স্টেট ম্যানেজমেন্ট লাইব্রেরি) ব্যবহার করে, আপনি গ্লোবাল স্টেট ম্যানেজমেন্টও করতে পারেন, যেখানে এক কম্পোনেন্টের ডেটা অন্য কম্পোনেন্টে শেয়ার করা যায়।

৬. কম্পোনেন্টের লাইফসাইকেল মেথড

Vue.js প্রতিটি কম্পোনেন্টের জন্য কিছু নির্দিষ্ট লাইফসাইকেল মেথড প্রদান করে, যেমন created, mounted, updated, destroyed ইত্যাদি। এসব মেথড দিয়ে আপনি কম্পোনেন্টের জীবনের বিভিন্ন সময়ে নির্দিষ্ট কার্যাবলী পরিচালনা করতে পারেন, যেমন ডেটা ফেচিং, DOM আপডেট ইত্যাদি।

যখন কম্পোনেন্ট ব্যবহার করা উচিত

• পুনঃব্যবহারযোগ্য UI এলিমেন্ট: যদি কোনো UI এলিমেন্ট (যেমন বাটন, টেবিল, লিস্ট) বারবার ব্যবহার করতে হয়, তবে সেই এলিমেন্টটিকে একটি কম্পোনেন্ট হিসেবে তৈরি করুন।
• বিশেষ ধরনের লজিক: কোনো নির্দিষ্ট কার্যাবলীর জন্য আলাদা লজিক থাকতে পারে, যেমন ফর্ম ভ্যালিডেশন, ডেটা ফেচিং, ইভেন্ট হ্যান্ডলিং, যা এক একটি কম্পোনেন্টে রাখা উচিত।
• বড় অ্যাপ্লিকেশন: বড় অ্যাপ্লিকেশনগুলোতে আপনি কম্পোনেন্টের মাধ্যমে কোড ভাগ করে রাখতে পারবেন, যা অ্যাপ্লিকেশনটিকে ম্যানেজ করা এবং স্কেল করা সহজ করে তোলে।

সারাংশ

Vue.js এর কম্পোনেন্টগুলো অ্যাপ্লিকেশন ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ। তারা কোডের পুনঃব্যবহারযোগ্যতা, স্কেলেবিলিটি, এবং মডুলারিটি নিশ্চিত করে, এবং উন্নত কোড অর্গানাইজেশন ও ডিবাগিংয়ের সুবিধা প্রদান করে। কম্পোনেন্ট ভিত্তিক আর্কিটেকচার দ্বারা আপনি বড় অ্যাপ্লিকেশনগুলোকে সহজভাবে মেইন্টেইন এবং স্কেল করতে পারেন।

Vue.js এ কম্পোনেন্ট হচ্ছে অ্যাপ্লিকেশনের ছোট ছোট অংশ বা ব্লক, যা UI এবং এর আচরণ সংজ্ঞায়িত করে। আপনি Vue কম্পোনেন্টগুলোকে দুই ধরনেরভাবে ব্যবহার করতে পারেন: লোকাল কম্পোনেন্ট এবং গ্লোবাল কম্পোনেন্ট। উভয়ের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে, যা বুঝে ব্যবহার করলে অ্যাপ্লিকেশনটি আরও কার্যকরী ও সংগঠিত হয়।

১. লোকাল কম্পোনেন্ট তৈরি করা

লোকাল কম্পোনেন্টগুলো একটি নির্দিষ্ট কম্পোনেন্ট বা ফাইলের মধ্যে ব্যবহৃত হয়, এবং শুধুমাত্র সেই কম্পোনেন্টের scope এর মধ্যে অ্যাক্সেসযোগ্য থাকে। এটি সাধারণত ছোট, পুনঃব্যবহারযোগ্য UI ব্লক তৈরি করার জন্য ব্যবহৃত হয়।

লোকাল কম্পোনেন্ট ব্যবহারের ধাপ:

1. কম্পোনেন্ট তৈরি করা: প্রথমে একটি নতুন Vue কম্পোনেন্ট তৈরি করুন। উদাহরণস্বরূপ, MyComponent.vue নামক একটি কম্পোনেন্ট তৈরি করা হল:

<!-- src/components/MyComponent.vue -->
<template>
  <div>
    <h1>Hello, I'm a Local Component!</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

2. কম্পোনেন্ট ইনপোর্ট এবং ব্যবহার করা: এরপর, এই কম্পোনেন্টটি লোকালভাবে ব্যবহারের জন্য আপনার মূল কম্পোনেন্ট বা App.vue-এ এটি ইনপোর্ট করুন এবং রেজিস্টার করুন:

<!-- src/App.vue -->
<template>
  <div id="app">
    <MyComponent />  <!-- লোকাল কম্পোনেন্ট ব্যবহার -->
  </div>
</template>

<script>
// লোকাল কম্পোনেন্ট ইনপোর্ট করা
import MyComponent from './components/MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent  // লোকাল কম্পোনেন্ট রেজিস্টার করা
  }
};
</script>

এখন MyComponent শুধুমাত্র App.vue কম্পোনেন্টে ব্যবহারযোগ্য, এবং এটি অন্যান্য কম্পোনেন্টে ব্যবহৃত হবে না।

২. গ্লোবাল কম্পোনেন্ট তৈরি করা

গ্লোবাল কম্পোনেন্টগুলো পুরো অ্যাপ্লিকেশনের মধ্যে যে কোনো কম্পোনেন্টে ব্যবহার করা যায়। একবার গ্লোবালি রেজিস্টার করার পর, আপনি সেই কম্পোনেন্টটি যেকোনো কম্পোনেন্টে ব্যবহার করতে পারবেন।

গ্লোবাল কম্পোনেন্ট ব্যবহারের ধাপ:

1. কম্পোনেন্ট তৈরি করা: প্রথমে একটি কম্পোনেন্ট তৈরি করুন, যেমন GlobalComponent.vue:

<!-- src/components/GlobalComponent.vue -->
<template>
  <div>
    <h1>This is a Global Component!</h1>
  </div>
</template>

<script>
export default {
  name: 'GlobalComponent',
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

2. গ্লোবালভাবে রেজিস্টার করা: গ্লোবাল কম্পোনেন্ট রেজিস্টার করার জন্য, আপনাকে main.js ফাইল ব্যবহার করতে হবে। এখানে, Vue অ্যাপ্লিকেশন শুরু করার সময় কম্পোনেন্টটি গ্লোবালভাবে রেজিস্টার করা হবে:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import GlobalComponent from './components/GlobalComponent.vue';

const app = createApp(App);

// গ্লোবাল কম্পোনেন্ট রেজিস্টার করা
app.component('GlobalComponent', GlobalComponent);

app.mount('#app');

3. গ্লোবাল কম্পোনেন্ট ব্যবহার করা: এখন, GlobalComponent কম্পোনেন্টটি অ্যাপের যেকোনো অংশে ব্যবহার করা যাবে, যেমন:

<!-- src/App.vue -->
<template>
  <div id="app">
    <GlobalComponent />  <!-- গ্লোবাল কম্পোনেন্ট ব্যবহার -->
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

এখন GlobalComponent যেকোনো কম্পোনেন্টে ব্যবহার করা যাবে, কারণ এটি গ্লোবালি রেজিস্টার করা হয়েছে।

৩. লোকাল এবং গ্লোবাল কম্পোনেন্টের মধ্যে পার্থক্য

৪. কোনটি ব্যবহার করবেন?

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

এখন আপনি লোকাল এবং গ্লোবাল কম্পোনেন্ট তৈরি ও ব্যবহার করার মৌলিক ধারণা পেয়ে গেছেন। এই দুটি পদ্ধতি দিয়ে আপনি Vue.js প্রোজেক্টের কম্পোনেন্টগুলিকে আরও কার্যকরীভাবে সাজাতে পারবেন।

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-এর ডেটা পরিবর্তন করা উচিত নয়।

Vue.js-এ কম্পোনেন্টগুলো একে অপরের সাথে যোগাযোগ করতে বিভিন্ন পদ্ধতি ব্যবহার করতে পারে। এর মধ্যে দুটি জনপ্রিয় পদ্ধতি হল ইভেন্ট ইমিট (Event Emit) এবং প্রপস (Props) এর মাধ্যমে ডেটা পাস করা। তবে যখন কম্পোনেন্টগুলো একটি নির্দিষ্ট ইন্টারঅ্যাকশন বা তথ্য আদান-প্রদান করতে চায়, তখন ইভেন্ট ইমিট খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। নিচে ইভেন্ট ইমিট এবং কম্পোনেন্ট কমিউনিকেশনের বিভিন্ন পদ্ধতির ব্যাখ্যা দেওয়া হলো।

১. ইভেন্ট ইমিট (Event Emit)

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

প্যারেন্ট-চাইল্ড কম্পোনেন্টে ইভেন্ট ইমিট ব্যবহার:

• চাইল্ড কম্পোনেন্ট প্যারেন্ট কম্পোনেন্টের কাছে ইভেন্ট পাঠায়।
• প্যারেন্ট কম্পোনেন্ট ইভেন্ট লিসেন করে এবং এর সাথে কোনো একশন যুক্ত করে।

চাইল্ড কম্পোনেন্টে ইভেন্ট ইমিট করা

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠানোর জন্য this.$emit() ব্যবহার করা হয়। this.$emit() ফাংশনটি একটি ইভেন্ট ট্রিগার করে এবং অতিরিক্ত ডেটা প্যারেন্ট কম্পোনেন্টে পাঠায়।

উদাহরণ:

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

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // ইভেন্ট ইমিট করা এবং ডেটা পাস করা
      this.$emit('messageSent', 'Hello from Child!');
    }
  }
}
</script>

এখানে, this.$emit('messageSent', 'Hello from Child!') কমান্ডটি একটি messageSent ইভেন্ট ইমিট করে এবং "Hello from Child!" নামক একটি মেসেজ প্যারেন্ট কম্পোনেন্টে পাঠায়।

প্যারেন্ট কম্পোনেন্টে ইভেন্ট লিসেন করা

প্যারেন্ট কম্পোনেন্টে ইভেন্টটি লিসেন করার জন্য v-on ডিরেকটিভ ব্যবহার করা হয়। যখন চাইল্ড কম্পোনেন্ট ইভেন্টটি ইমিট করবে, প্যারেন্ট কম্পোনেন্টে তার প্রতিক্রিয়া নির্ধারণ করা হবে।

উদাহরণ:

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

<template>
  <div>
    <ChildComponent @messageSent="handleMessage"/>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(payload) {
      this.message = payload;
    }
  }
}
</script>

এখানে, <ChildComponent @messageSent="handleMessage"/> প্যারেন্ট কম্পোনেন্টে ইভেন্টের জন্য লিসেন করে। যখন চাইল্ড কম্পোনেন্ট messageSent ইভেন্ট ইমিট করে, প্যারেন্ট কম্পোনেন্টের handleMessage মেথডটি কল হয় এবং প্যারেন্ট কম্পোনেন্টের message ডেটা আপডেট হয়।

২. প্রপস (Props)

কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করার আরেকটি উপায় হল প্রপস। প্রপস হল একটি মেকানিজম যার মাধ্যমে প্যারেন্ট কম্পোনেন্ট চাইল্ড কম্পোনেন্টে ডেটা পাঠাতে পারে।

প্রপস ব্যবহার:

• প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রপস হিসেবে পাঠানো হয়।
• চাইল্ড কম্পোনেন্ট সেই ডেটাকে প্রপস হিসেবে গ্রহণ করে এবং ব্যবহার করে।

উদাহরণ:

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

<template>
  <div>
    <ChildComponent :message="parentMessage"/>
  </div>
</template>

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

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

এখানে, :message="parentMessage" এর মাধ্যমে প্যারেন্ট কম্পোনেন্টের parentMessage ডেটা চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাঠানো হচ্ছে।

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

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

এখানে, চাইল্ড কম্পোনেন্ট message প্রপস গ্রহণ করছে এবং এটি টেমপ্লেটে প্রদর্শিত হচ্ছে।

৩. কম্পোনেন্টস কমিউনিকেশন প্যাটার্ন

Vue.js-এ কম্পোনেন্ট কমিউনিকেশনের জন্য আরও কিছু জনপ্রিয় প্যাটার্ন রয়েছে:

- ভাতৃত্ব সম্পর্ক (Sibling Components)

যদি দুটি কম্পোনেন্ট (যেমন ভাই-বোন) একে অপরের সাথে যোগাযোগ করতে চায়, তবে সাধারণভাবে প্যারেন্ট কম্পোনেন্টের মাধ্যমে ইভেন্ট বা প্রপস ব্যবহার করা হয়।

- ব্রডকাস্ট/রিসিভ (Event Bus)

কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করার জন্য ইভেন্ট বাস ব্যবহার করা যায়। এটি সাধারণত ছোট অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়, তবে বড় অ্যাপ্লিকেশনে Vuex ব্যবহার করা বেশি কার্যকরী।

- Vuex (State Management)

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

সারাংশ

Vue.js-এ ইভেন্ট ইমিট এবং প্রপস কম্পোনেন্টগুলোর মধ্যে যোগাযোগের প্রধান পদ্ধতি। যখন প্যারেন্ট এবং চাইল্ড কম্পোনেন্টের মধ্যে সরাসরি যোগাযোগ করতে হয়, তখন প্রপস এবং ইভেন্ট ইমিট ব্যবহার করা হয়। আরো জটিল কম্পোনেন্ট কমিউনিকেশন ব্যবস্থায় Vuex এবং ইভেন্ট বাস ব্যবহার করা যায়।