Vue উপাদানের ভূমিকা

ভূমিকা

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

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

একটি Vue উপাদান কি?

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

আপনি Vue উপাদানগুলিকে জাভাস্ক্রিপ্ট-ইম্বুড HTML উপাদান হিসাবে ভাবতে পারেন, যা আপনি নিজেকে সংজ্ঞায়িত করতে এবং ম্যানিপুলেট করতে পারেন।

একটি সাধারণ Vue অ্যাপ্লিকেশন অনেকগুলি উপাদানের সমন্বয়ে গঠিত যেগুলি যতবার প্রয়োজন ততবার পুনরায় ব্যবহার করা যেতে পারে।

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

কিভাবে একটি Vue কম্পোনেন্ট তৈরি করবেন

আমাদের প্রজেক্ট কিভাবে তৈরি হয়েছে তার উপর নির্ভর করে একটি Vue কম্পোনেন্ট তৈরি করার দুটি মৌলিক উপায় রয়েছে - একটি বিল্ড সেটআপ সহ বা ছাড়া. প্রথম ক্ষেত্রে, প্রতিটি উপাদান একটি পৃথক ফাইলে সংরক্ষণ করা হয়। দ্বিতীয় ক্ষেত্রে, একটি ফাইলে একাধিক উপাদান থাকতে পারে।

একটি বিল্ড সেটআপ দিয়ে Vue উপাদান তৈরি করুন

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

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

বিল্ড সেটআপ ছাড়াই Vue উপাদান তৈরি করুন

যদি আপনি, যাই হোক না কেন, একটি প্যাকেজ ম্যানেজার যেমন ব্যবহার করতে পারবেন না npm আপনার মেশিনে Vue ইনস্টল করতে, আপনি এখনও আপনার অ্যাপে Vue ব্যবহার করতে পারেন। বিল্ডিং Vue ব্যবহার করে একটি বিকল্প npm একটি মাধ্যমে Vue ইনস্টল করা হয় সিডিএন (সামগ্রী বিতরণ নেটওয়ার্ক) সরাসরি আপনার অ্যাপে। আসুন একটি Vue কম্পোনেন্ট তৈরি করার এই উপায়টি দ্রুত এগিয়ে নেওয়া যাক।

বিল্ড ছাড়া Vue ইনস্টল করা আমাদেরকে Vue-নির্দিষ্ট কার্যকারিতা ব্যবহার করতে সক্ষম করবে যেমনটি আমরা প্লেইন জাভাস্ক্রিপ্টের সাথে করি। সিনট্যাক্সটি আমরা সাধারণ এসএফসিতে যা দেখেছি তার সাথে কিছুটা মিল রয়েছে:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

এই গাইডে, আমরা ব্যবহার করব SFC সিনট্যাক্স, কারণ এটি উপাদান তৈরির সবচেয়ে বেশি ব্যবহৃত পদ্ধতি।

Vue-তে উপাদানগুলি কীভাবে নিবন্ধন করবেন

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

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

Vue উপাদান - বিশ্বব্যাপী নিবন্ধন

বিশ্বব্যাপী নিবন্ধিত উপাদানগুলি, যেমন নাম থেকে বোঝা যায়, বিশ্বব্যাপী উপলব্ধ, যার অর্থ আমাদের অ্যাপ্লিকেশনের যেকোনো উপাদানে সেগুলিকে আবার আমদানি না করেই ব্যবহার করা যেতে পারে৷ এটি ব্যবহার করে একটি উপাদান নিবন্ধন দ্বারা সম্পন্ন করা হয় app.component() পদ্ধতি:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

এমন পরিস্থিতিতে যেখানে আমাদের অনেক উপাদান আছে, আমরা পারি চেন তাদের এইভাবে:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

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

<ChildComponent/>
<ProfileComponent/>

Vue উপাদান - স্থানীয় নিবন্ধন

আমরা বেশিরভাগ ক্ষেত্রে স্থানীয় নিবন্ধন ব্যবহার করব কারণ এটি আমাদের নিবন্ধিত উপাদানগুলির প্রাপ্যতার সুযোগ দিতে দেয়। এই উপাদানগুলি আমদানি করা এবং তারপরে তাদের যোগ করা components বিকল্প এটি সম্পন্ন করে:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

উপাদানগুলির নামকরণের সময়, ব্যবহার করুন ক্যামেলকেস এটা স্পষ্ট করতে যে এটি টেমপ্লেটের একটি নেটিভ HTML উপাদানের পরিবর্তে একটি Vue উপাদান। এটি জাভাস্ক্রিপ্টে উপাদানগুলি আমদানি এবং নিবন্ধন করা সহজ করে তোলে।

Vue উপাদানগুলির মাধ্যমে কীভাবে ডেটা পাস করবেন

উপাদানগুলি তৈরি করার সুবিধাগুলির মধ্যে একটি হল কোডটি মডুলার করে পুনরায় ব্যবহার করার ক্ষমতা।

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

সাজসরঞ্জাম

প্রপস হল কাস্টম অ্যাট্রিবিউট যা আমরা একটি কম্পোনেন্টে রেজিস্টার করতে পারি, তাই আমরা প্যারেন্ট কম্পোনেন্ট থেকে ডেটা ব্যবহার করে চাইল্ড কম্পোনেন্টে পাঠাতে পারি props স্ক্রিপ্ট ট্যাগের মধ্যে বিকল্প:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

স্লট মেশিন

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

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

তারপরে আমরা এই উপাদানটি যেখানে চাই সেখানে ব্যবহার করতে পারি এবং এটিকে আমাদের পছন্দসই সামগ্রী দিতে পারি। এটি একটি বিষয়বস্তু দিতে ব্যর্থতার মানে এটি আমাদের দেওয়া ডিফল্ট মান ব্যবহার করবে (আমাকে ক্লিক করুন):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Vue উপাদানগুলি থেকে ইভেন্টগুলি কীভাবে নির্গত করবেন

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

ধরে নিন আমাদের একটি মূল উপাদান আছে (App.vue) যাতে একটি একক শিশু উপাদান রয়েছে (MyBlogPost.vue) তদ্ব্যতীত, চাইল্ড উপাদানটিতে একটি বোতাম রয়েছে যা শিরোনাম পরিবর্তন করার কথা।

অনুমান করুন যখন একটি বোতামে ক্লিক করা হয় তখন আমরা আমাদের পৃষ্ঠার শিরোনাম পরিবর্তন করতে চাই, যাতে একটি ফাংশন ট্রিগার হয়:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

এবং শিশু উপাদান এই মত দেখাবে:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

উপসংহার

এই নির্দেশিকায়, আমরা Vue-তে উপাদানগুলির সাথে কীভাবে কাজ করতে হয় তা শিখেছি, যা Vue ব্যবহার করার জন্য প্রয়োজনীয়। আমরা কীভাবে ডেটা পাঠাতে এবং গ্রহণ করতে হয়, সেইসাথে কীভাবে ইভেন্টগুলি নির্গত করতে হয় তাও শিখেছি।

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://stackabuse.com/introduction-to-vue-components/