Components არის გადამწყვეტი კონცეფცია Vue.js-ში, რომელიც საშუალებას გაძლევთ შექმნათ სტრუქტურირებული და შენარჩუნებული ვებ აპლიკაციები., components თქვენ შეგიძლიათ დაშალოთ თქვენი აპლიკაცია პატარა, თვითმყოფად ნაწილებად, თითოეული პასუხისმგებელი მომხმარებლის ინტერფეისის კონკრეტულ ნაწილზე.
ამ სტატიაში ჩვენ განვიხილავთ, თუ როგორ შევქმნათ components Vue.js-ში, გამოვიყენოთ ისინი კოდის ხელახლა გამოსაყენებლად და მონაცემების გადასაცემად components. ჩვენ ჩავუღრმავდებით props მონაცემთა გადაცემის გამოყენებას მშობელი კომპონენტიდან შვილობილ კომპონენტზე და მოვლენების გამოყენებას შვილის კომპონენტის მონაცემების სარეზერვო გადასაცემად მის მშობელ კომპონენტზე.
1. შექმნა Components
Components Vue.js-ში შეიძლება შეიქმნას `Vue.component` მეთოდით ან ერთი ფაილის განსაზღვრით components.
მაგალითი:
2. კომპონენტის სტრუქტურა
Vue კომპონენტი შედგება შაბლონისგან, სკრიპტისა და არჩევითი სტილისგან. შაბლონი შეიცავს HTML მარკირებას, სკრიპტი შეიცავს კომპონენტის ვარიანტებს(მონაცემებს, მეთოდებს, გამოთვლილ თვისებებს, სიცოცხლის ციკლის კაკვებს) და სტილები განსაზღვრავს კომპონენტის გარეგნობას.
მაგალითი:
3. კომპონენტის მრავალჯერადი გამოყენება
Components Vue.js-ში შეიძლება ხელახლა გამოიყენოთ თქვენს აპლიკაციაში, რაც შეამცირებს კოდების დუბლირებას და აუმჯობესებს შენარჩუნებას. ისინი ხელს უწყობენ მოდულურ მიდგომას, რაც საშუალებას გაძლევთ შეადგინოთ პატარა components უფრო დიდებად.
მაგალითი:
4. Props
Props საშუალებას გაძლევთ გადასცეთ მონაცემები მშობლიდან components შვილზე components. Props დეკლარირებულია ბავშვის კომპონენტში და შეიძლება გამოყენებულ იქნას როგორც ჩვეულებრივი მონაცემთა თვისებები.
მაგალითი:
5. Custom Events
Components შეუძლია გამოუშვას მორგებული მოვლენები მშობლებთან კომუნიკაციისთვის components. მშობელს components შეუძლია მოუსმინოს ამ მოვლენებს და მოახდინოს შესაბამისი რეაგირება.
მაგალითი:
ეს მაგალითები აჩვენებს Vue.js-ის ძირითად ცნებებს components, რაც აჩვენებს მათ მოქნილობას, ხელახლა გამოყენებადობას და კომუნიკაციის შესაძლებლობებს. Components დაეხმარეთ შექმნათ მოდულური და შესანარჩუნებელი კოდი, რაც Vue.js-ს აქცევს მძლავრ ჩარჩოს მასშტაბირებადი აპლიკაციების შესაქმნელად.