Het maken van kindcomponenten in Vue

Componenten hebben intern dezelfde structuur als het hoofdcomponent waarmee we eerder werkten. Dat betekent dat in het bestand van elk component de tags script en template zullen staan.

Laten we als voorbeeld een component maken met de naam User. We plaatsen de code in het bijbehorende bestand:

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

In het object data van het component kunnen we wat gegevens plaatsen:

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

Deze gegevens kunnen worden weergegeven in de weergave van het component:

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

Laten we nu het door ons gemaakte component verbinden met het hoofdcomponent. Om dit te doen importeren we het eerst:

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

Laten we de naam ervan instellen in de instelling components:

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

In de weergave van het ouderlijk component kan de weergave van het kindcomponent worden getoond. Om dit te doen moet u een tag schrijven waarvan de naam overeenkomt met de naam van het component. Laten we dit doen:

<template>
	<User />
</template>

Maak een component Employee. Verbind het met het hoofdcomponent.