Vue اجزاء کا تعارف

تعارف

ایک بڑی ایپلیکیشن تیار کرتے وقت، کوڈ کو پڑھنے، ساخت اور برقرار رکھنے میں آسان بنانے کے لیے اسے چھوٹے اجزاء میں تقسیم کرنا ہمیشہ اچھا خیال ہوتا ہے۔ زیادہ تر Vue beginners سمجھتے ہیں کہ کون سے اجزاء کم از کم تصوراتی طور پر ہیں، لیکن ہو سکتا ہے وہ یہ نہ سمجھیں کہ وہ کیا کر سکتے ہیں اور کیا نہیں کر سکتے۔

اس گائیڈ میں، ہم ایک نظر ڈالیں گے کہ Vue میں ایک جز کیا ہے، یہ کیسے کام کرتا ہے، ڈیٹا اور واقعات کو ان کے ذریعے کیسے منتقل کیا جائے اور بہت کچھ۔

Vue جزو کیا ہے؟

اجزاء Vue عناصر کی دوبارہ قابل استعمال مثالیں ہیں جن میں ٹیمپلیٹس، سٹائلز، اور JavaScript عناصر شامل ہیں۔ ہر جزو "اپنی چیز" ہے، جیسا کہ ہر HTML عنصر "اپنی چیز" ہے، اور Vue اجزاء اور HTML عناصر دونوں ہمیں ویب صفحات کے لیے تعمیراتی بلاکس کے طور پر استعمال کرنے کی اجازت دیتے ہیں۔

آپ Vue اجزاء کے بارے میں JavaScript-imbued HTML عناصر کے بارے میں سوچ سکتے ہیں، جس کی وضاحت آپ خود کر سکتے ہیں۔

ایک عام Vue ایپلی کیشن متعدد اجزاء پر مشتمل ہوتی ہے جسے ضرورت کے مطابق کئی بار دوبارہ استعمال کیا جا سکتا ہے۔

مثال کے طور پر، ایک عام ویب سائٹ کے حصے ہوتے ہیں جو تمام صفحات پر ظاہر ہوتے ہیں - navbar، ہیڈر، فوٹر، وغیرہ۔ لہذا، ان میں سے ہر ایک کو الگ الگ جزو بنانا ایک اچھا عمل سمجھا جاتا ہے۔ اس طرح، ہم اچھی طرح سے ساختہ، پڑھنے کے قابل، دوبارہ قابل استعمال، اور آسانی سے برقرار رکھنے کے قابل کوڈ بنا رہے ہیں:

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 انسٹال کرنا ہے۔ CDN (مواد کی فراہمی کا نیٹ ورک) براہ راست آپ کی ایپ میں۔ آئیے فوری طور پر Vue جزو بنانے کے اس طریقے کو دیکھیں۔

بغیر تعمیر کے Vue کو انسٹال کرنے سے ہمیں Vue مخصوص فنکشنلٹیز استعمال کرنے کا اہل بنائے گا جیسا کہ ہم سادہ JavaScript کے ساتھ کرتے ہیں۔ نحو کچھ اس سے ملتا جلتا ہے جو ہم نے عام SFCs میں دیکھا ہے:

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 استعمال کرنے والے ہر فرد کے لیے ضروری ہے۔ ہم نے یہ بھی سیکھا کہ ڈیٹا کیسے بھیجنا اور وصول کرنا ہے، ساتھ ہی واقعات کو کیسے خارج کرنا ہے۔

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://stackabuse.com/introduction-to-vue-components/