Vue میں components اور props کیسے کام کرتے ہیں؟

Question

Accepted Answer

**Components** قابل دوبارہ استعمال، خود مختار UI کے ٹکڑے ہیں۔ **Props** یہ ہے کہ parent اپنا ڈیٹا *نیچے* child کو کیسے منتقل کرتا ہے — یہ child کے typed، read-only inputs ہیں۔ ## Child میں props کی تعریف ```vue ``` ## Parent سے props منتقل کرنا ```vue ``` فرق پر غور کریں: `name="Ann"` ایک لفظی string منتقل کرتا ہے، جبکہ `:age="30"` (with `v-bind`) ایک expression کا جائزہ لیتا ہے — اعداد، booleans، objects، یا variables کے لیے ضروری ہے۔ یہ بھی نوٹ کریں کہ prop کے نام JS میں `camelCase` ہیں لیکن templates میں `kebab-case` ہیں (`isAdmin` → `:is-admin`)۔ ## Props یک طرفہ اور read-only ہیں ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` ڈیٹا **نیچے** بہتا ہے (parent → child)۔ child کو اپنے props میں تبدیلی نہیں کرنی چاہیے؛ اگر اسے کچھ بدلنے کی ضرورت ہے، تو یہ یا تو ایک local copy استعمال کرتا ہے یا **ایک event emit کرتا ہے** جو parent سے source کو تبدیل کرنے کے لیے کہتا ہے ("props down, events up")۔ یہ یک طرفہ بہاؤ ڈیٹا کو قابل پیش گوئی رکھتا ہے۔ ## TypeScript props ```vue ``` ## اس سے فرق کیوں پڑتا ہے Components + props Vue architecture کی بنیاد ہیں — آپ reusable components سے UIs کو compose کرتے ہیں اور انہیں props کے ذریعے configure کرتے ہیں۔ yہ سمجھنا کہ props **یک طرفہ اور read-only** ہیں (ڈیٹا down، events up) بنیادی ذہنی ماڈل ہے جو Vue apps کو قابل پیش گوئی رکھتا ہے؛ props کو mutate کرنا یا two-way prop flow کی توقع کرنا bugs کا ایک روایتی منبع ہے۔