Lapsikomponenttien luominen Vuessa

Komponentit sisältävät saman rakenteen kuin pääkomponentti, jolla työskentelimme aiemmin. Eli jokaisen komponentin tiedostossa on tagit script ja template.

Tehdään esimerkiksi komponentti nimeltä User. Sijoitamme sen koodin vastaavaan tiedostoon:

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

Komponentin data-objektiin voidaan sijoittaa tietoja:

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

Nämä tiedot voidaan näyttää komponentin näkymässä:

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

Yhdistetään nyt luomamme komponentti pääkomponenttiin. Tuodaan se ensin sisään:

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

Kirjoitetaan sen nimi asetukseen components:

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

Vanhempakomponentin näkymässä voidaan näyttää lapsikomponentin näkymä. Tätä varten on kirjoitettava tagi, jonka nimi vastaa komponentin nimeä. Tehdään tämä:

<template>
	<User />
</template>

Tee komponentti Employee. Yhdistä se pääkomponenttiin.