Skep van Kindkomponente in Vue

Komponente het binne-in dieselfde struktuur as die hoofkomponent waarmee ons vroeër gewerk het. Dit beteken in elke komponent se lêer sal daar script en template etikette wees.

Kom ons maak byvoorbeeld 'n komponent met die naam User. Plaas sy kode in die ooreenstemmende lêer:

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

In die data objek van die komponent kan 'n paar data geplaas word:

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

Hierdie data kan in die komponent se vertoning uitgestal word:

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

Kom ons koppel nou die geskepde komponent aan die hoofkomponent. Om dit te doen, importeer ons dit eers:

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

Laat ons sy naam in die components opskrif inskryf:

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

In die ouerkomponent se vertoning kan die kindkomponent se vertoning uitgestal word. Om dit te doen, moet jy 'n etikette skryf waarvan die naam ooreenstem met die naam van die komponent. Kom ons doen dit:

<template>
	<User />
</template>

Maak 'n komponent Employee. Koppel dit aan die hoofkomponent.