Vue-dä çaga komponentleri döretmek

Komponentleriň içindäki gurluş, öňki işleän esasy komponentimiz bilen deňdir. Ýagny her komponent faýlynda script we template tegleri bolar.

Mysal üçin geliň, ady User bolan komponent döreteliň. Onuň koduny degişli faýlda ýerleşdireliň:

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

data komponentiniň obýektinde käbir maglumatlar ýerleşdirip bolýar:

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

Bu maglumatlary komponentiň görnüşinde çykaryp bolýar:

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

Indi döreden komponentimizi esasy komponente birikdireliň. Bunun üçin ilki bilen ony import edeliň:

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

Ony components sazlamasyna ýazalyň:

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

Ene komponentiň görnüşinde çaga komponentiň görnüşini çykaryp bolýar. Bunun üçin komponentiň adyna deň gelýän teg ýazmaly. Geliň muny edeliň:

<template>
	<User />
</template>

Employee komponentini düzüň. Ony esasy komponente birikdiriň.