Komponentu izveide Vue

Komponentiem iekšpusē ir tāda paša struktūra kā galvenajam komponentam, ar kuru mēs strādājām iepriekš. Tas nozīmē, ka katrā komponenta failā būs atrodami tagi script un template.

Piemēram, izveidosim komponentu ar nosaukumu User. Novietosim tā kodu atbilstošajā failā:

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

Komponenta objekta data var ievietot dažus datus:

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

Šos datus var attēlot komponenta skatā:

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

Tagad pievienosim izveidoto komponentu galvenajam komponentam. Lai to izdarītu, vispirms to importēsim:

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

Norādīsim tā nosaukumu iestatījumā components:

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

Vecākkomponenta skatā var attēlot apakškomponenta skatu. Lai to izdarītu, jāuzraksta tags, kura nosaukums atbilst komponenta nosaukumam. Izdarīsim to:

<template>
	<User />
</template>

Izveidojiet komponentu Employee. Pievienojiet to galvenajam komponentam.