როგორ მუშაობენ კომპონენტები და props Vue-ში?

Question

Accepted Answer

**კომპონენტები** არის UI-ის გამოყენებადი, დამოუკიდებელი ნაწილები. **Props** არის ის, თუ როგორ აქვს მშობელს მონაცემების გადაცემა *ქვემოთ* შვილზე — ისინი შვილის ტიპიფიცირებული, მხოლოდ წაკითხვადი შეყვანაა. ## Props-ის განსაზღვრა შვილში ```vue ``` ## Props-ის გადაცემა მშობლიდან ```vue ``` შენიშვნა განსხვავებაზე: `name="Ann"` გადის პირდაპირი სტრიქონი, ხოლო `:age="30"` (`v-bind`-თან) აფასებს გამოხატულებას — საჭიროა რიცხვებისთვის, ბულეანებისთვის, ობიექტებისთვის ან ცვლადებისთვის. ასევე შენიშვნა, რომ props სახელები არის `camelCase` JS-ში, მაგრამ `kebab-case` შაბლონებში (`isAdmin` → `:is-admin`). ## Props არის ერთმხრივი და მხოლოდ წაკითხვადი ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` მონაცემები მიედინება **ქვემოთ** (მშობელი → შვილი). შვილმა არ უნდა შეცვალოს მისი props; თუ რამე უნდა შეცვალოს, ის ან იყენებს ადგილობრივ ასლს ან **აკეთებს ღონისძიებას** და ითხოვს მშობელს შეცვალოს წყარო ("props ქვემოთ, events ზემოთ"). ეს ერთმხრივი ნაკადი ინახავს მონაცემებს პროგნოზირებადი. ## TypeScript Props ```vue ``` ## რატომ მნიშვნელოვანი კომპონენტები + props არის Vue არქიტექტურის საფუძველი — თქვენ აკომპოზირებთ UI-ს გამოყენებადი კომპონენტებიდან და კონფიგურირებთ მათ props-ის მეშვეობით. ესმოდეთ, რომ props არის **ერთმხრივი და მხოლოდ წაკითხვადი** (მონაცემები ქვემოთ, ღონისძიებები ზემოთ) არის ის ძირითადი ფიქრის მოდელი, რომელიც Vue აპს პროგნოზირებადს ინახავს; props-ის მუტირება ან ორმხრივი props ნაკადის მოლოდინი არის ხარვეზების კლასიკური წყარო.