Vue-da voris komponentlarni yaratish

Komponentlar ichida biz ilgari ishlagan asosiy komponent bilan bir xil tuzilishga ega. Ya'ni har bir komponent faylida script va template teglari bo‘ladi.

Keling, misol uchun User nomli komponent yarataylik. Uni koding mos faylga joylashtiramiz:

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

data komponent ob'ektida ba'zi ma'lumotlarni joylashtirish mumkin:

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

Ushbu ma'lumotlarni komponentning ko‘rinishida chiqarish mumkin:

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

Keling, endi yaratilgan komponentimizni asosiy komponentga ulaymiz. Buning uchun avval uni import qilamiz:

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

Uning nomini components sozlamasida yozamiz:

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

Ota komponentning ko‘rinishida voris komponentning ko‘rinishini chiqarish mumkin. Buning uchun komponent nomiga mos keladigan teg yozish kerak. Keling, buni qilaylik:

<template>
	<User />
</template>

Employee komponentini yarating. Uni asosiy komponentga ulang.