შვილობილი კომპონენტების შექმნა Vue-ში

კომპონენტებს შიდა აქვთ იგივე სტრუქტურა, როგორც მთავარ კომპონენტს, რომელთანაც ადრე ვმუშაობდით. ანუ თითოეული კომპონენტის ფაილში იქნება ტეგები script და template.

მაგალითისთვის შევქმნათ კომპონენტი სახელად User. განვათავსოთ მისი კოდი შესაბამის ფაილში:

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

data ობიექტში კომპონენტს შეუძლია განათავსოს მონაცემები:

<script>
	export default {
		data() {
			return {
				name: 'john'
			}
		}
	}
</script>

ამ მონაცემების ჩვენება შესაძლებელია კომპონენტის წარმოდგენაში:

<template>
	{{ name }}
</template>

ახლა კი დავაკავშიროთ ჩვენ მიერ შექმნილი კომპონენტი მთავარ კომპონენტთან. ამისთვის ჯერ შევიტანოთ იგი:

<script>
	import User from './components/User.vue'
	
	export default {
		
	}
</script>

ჩავწეროთ მისი სახელი components კონფიგურაციაში:

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

მშობელი კომპონენტის წარმოდგენაში შესაძლებელია შვილობილი კომპონენტის ჩვენება. ამისთვის საჭიროა დაწეროთ ტეგი, რომლის სახელი ემთხვევა კომპონენტის სახელს. მოდით, გავაკეთოთ ეს:

<template>
	<User />
</template>

შექმენით კომპონენტი Employee. დააკავშირეთ იგი მთავარ კომპონენტთან.