Vue.js এ কম্পোনেন্ট হচ্ছে অ্যাপ্লিকেশনের ছোট ছোট অংশ বা ব্লক, যা UI এবং এর আচরণ সংজ্ঞায়িত করে। আপনি Vue কম্পোনেন্টগুলোকে দুই ধরনেরভাবে ব্যবহার করতে পারেন: লোকাল কম্পোনেন্ট এবং গ্লোবাল কম্পোনেন্ট। উভয়ের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে, যা বুঝে ব্যবহার করলে অ্যাপ্লিকেশনটি আরও কার্যকরী ও সংগঠিত হয়।
১. লোকাল কম্পোনেন্ট তৈরি করা
লোকাল কম্পোনেন্টগুলো একটি নির্দিষ্ট কম্পোনেন্ট বা ফাইলের মধ্যে ব্যবহৃত হয়, এবং শুধুমাত্র সেই কম্পোনেন্টের scope এর মধ্যে অ্যাক্সেসযোগ্য থাকে। এটি সাধারণত ছোট, পুনঃব্যবহারযোগ্য UI ব্লক তৈরি করার জন্য ব্যবহৃত হয়।
লোকাল কম্পোনেন্ট ব্যবহারের ধাপ:
- কম্পোনেন্ট তৈরি করা: প্রথমে একটি নতুন 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>
- কম্পোনেন্ট ইনপোর্ট এবং ব্যবহার করা: এরপর, এই কম্পোনেন্টটি লোকালভাবে ব্যবহারের জন্য আপনার মূল কম্পোনেন্ট বা
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 কম্পোনেন্টে ব্যবহারযোগ্য, এবং এটি অন্যান্য কম্পোনেন্টে ব্যবহৃত হবে না।
২. গ্লোবাল কম্পোনেন্ট তৈরি করা
গ্লোবাল কম্পোনেন্টগুলো পুরো অ্যাপ্লিকেশনের মধ্যে যে কোনো কম্পোনেন্টে ব্যবহার করা যায়। একবার গ্লোবালি রেজিস্টার করার পর, আপনি সেই কম্পোনেন্টটি যেকোনো কম্পোনেন্টে ব্যবহার করতে পারবেন।
গ্লোবাল কম্পোনেন্ট ব্যবহারের ধাপ:
- কম্পোনেন্ট তৈরি করা: প্রথমে একটি কম্পোনেন্ট তৈরি করুন, যেমন
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>
- গ্লোবালভাবে রেজিস্টার করা: গ্লোবাল কম্পোনেন্ট রেজিস্টার করার জন্য, আপনাকে
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');
- গ্লোবাল কম্পোনেন্ট ব্যবহার করা: এখন,
GlobalComponentকম্পোনেন্টটি অ্যাপের যেকোনো অংশে ব্যবহার করা যাবে, যেমন:
<!-- src/App.vue -->
<template>
<div id="app">
<GlobalComponent /> <!-- গ্লোবাল কম্পোনেন্ট ব্যবহার -->
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
এখন GlobalComponent যেকোনো কম্পোনেন্টে ব্যবহার করা যাবে, কারণ এটি গ্লোবালি রেজিস্টার করা হয়েছে।
৩. লোকাল এবং গ্লোবাল কম্পোনেন্টের মধ্যে পার্থক্য
| বৈশিষ্ট্য | লোকাল কম্পোনেন্ট | গ্লোবাল কম্পোনেন্ট |
|---|---|---|
| রেজিস্ট্রেশন | শুধুমাত্র নির্দিষ্ট কম্পোনেন্টে রেজিস্টার করা হয়। | পুরো অ্যাপ্লিকেশনের মধ্যে রেজিস্টার করা হয়। |
| ব্যবহারযোগ্যতা | শুধু রেজিস্টার করা কম্পোনেন্টের মধ্যে ব্যবহারযোগ্য। | অ্যাপের যেকোনো কম্পোনেন্টে ব্যবহারযোগ্য। |
| স্কোপ | কম্পোনেন্টের স্কোপের মধ্যে সীমাবদ্ধ। | অ্যাপের পুরো স্কোপে উপলব্ধ। |
| কোড ব্যবস্থাপনা | কোড আরো সংগঠিত এবং নির্দিষ্ট অঞ্চলে সীমাবদ্ধ। | ছোট অ্যাপ্লিকেশনের জন্য সুবিধাজনক, তবে বড় প্রোজেক্টে সঠিক ব্যবস্থাপনা প্রয়োজন। |
৪. কোনটি ব্যবহার করবেন?
- লোকাল কম্পোনেন্ট: যদি একটি কম্পোনেন্ট শুধুমাত্র একটি নির্দিষ্ট জায়গায় ব্যবহৃত হয়, তাহলে লোকাল কম্পোনেন্ট ব্যবহার করা উচিত। এটি কোডকে আরও সংগঠিত রাখে এবং প্রয়োজনে শুধুমাত্র সেই কম্পোনেন্টে পরিবর্তন করা সহজ হয়।
- গ্লোবাল কম্পোনেন্ট: যদি একটি কম্পোনেন্ট পুরো অ্যাপের বিভিন্ন জায়গায় ব্যবহৃত হয়, তাহলে এটি গ্লোবাল কম্পোনেন্ট হিসেবে রেজিস্টার করা যেতে পারে। তবে, গ্লোবাল কম্পোনেন্ট ব্যবহার করার সময় সতর্ক থাকতে হবে, যাতে অ্যাপের কাঠামো খুব জটিল না হয়ে যায়।
এখন আপনি লোকাল এবং গ্লোবাল কম্পোনেন্ট তৈরি ও ব্যবহার করার মৌলিক ধারণা পেয়ে গেছেন। এই দুটি পদ্ধতি দিয়ে আপনি Vue.js প্রোজেক্টের কম্পোনেন্টগুলিকে আরও কার্যকরীভাবে সাজাতে পারবেন।
Read more
