Vaiko komponentų kūrimas Vue

Komponentai viduje turi tokią pačią struktūrą kaip ir pagrindinis komponentas, su kuriuo dirbome anksčiau. Tai yra, kiekvieno komponento faile bus ženklai script ir template.

Pavyzdžiui, sukurkime komponentą pavadinimu User. Jo kodą patalpinkime atitinkamame failėje:

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

Komponento data objekte galima patalpinti tam tikrus duomenis:

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

Šiuos duomenis galima atvaizduoti komponento atvaizde:

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

Dabar prijunkime sukurtą komponentą prie pagrindinio komponento. Norint tai padaryti, pirmiausia jį importuokime:

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

Įrašykime jo pavadinimą components nustatyme:

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

Tėvinio komponento atvaizde galima atvaizduoti vaikinio komponento atvaizdą. Norint tai padaryti, reikia parašyti ženklą, kurio pavadinimas atitinka komponento pavadinimą. Padarykime tai:

<template>
	<User />
</template>

Sukurkite komponentą Employee. Prijunkite jį prie pagrindinio komponento.