Krijimi i Komponentëve të Femijëve në Vue

Komponentët brenda kanë të njëjtën strukturë si komponenti kryesor, me të cilin kemi punuar më parë. Kjo do të thotë që në skedarin e çdo komponenti do të ketë tag-et script dhe template.

Le të bëjmë për shembull një komponent me emrin User. Le të vendosim kodin e tij në skedarin përkatës:

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

Në objektin data të komponentit mund të vendosni disa të dhëna:

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

Këto të dhëna mund të shfaqen në pamjen e komponentit:

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

Tani le ta lidhim komponentin e krijuar nga ne me komponentin kryesor. Për këtë, së pari le ta importojmë atë:

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

Le të shënojmë emrin e tij në konfigurimin components:

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

Në pamjen e komponentit prind mund të shfaqet pamja e komponentit të femijë. Për këtë duhet të shkruhet një tag, emri i të cilit korrespondon me emrin e komponentit. Le ta bëjmë këtë:

<template>
	<User />
</template>

Bëni një komponent Employee. Lidheni atë me komponentin kryesor.