Erstellung von Kindkomponenten in Vue

Komponenten haben intern die gleiche Struktur wie die Hauptkomponente, mit der wir zuvor gearbeitet haben. Das heißt, in der Datei jeder Komponente werden die Tags script und template vorhanden sein.

Lassen Sie uns als Beispiel eine Komponente mit dem Namen User erstellen. Wir platzieren ihren Code in der entsprechenden Datei:

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

Im Objekt data der Komponente kann man einige Daten unterbringen:

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

Diese Daten können in der Darstellung der Komponente ausgegeben werden:

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

Lassen Sie uns nun die erstellte Komponente mit der Hauptkomponente verbinden. Dazu importieren wir sie zunächst:

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

Tragen wir ihren Namen in der Einstellung components ein:

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

In der Darstellung der Elternkomponente kann die Darstellung der Kindkomponente ausgegeben werden. Dazu muss ein Tag geschrieben werden, dessen Name dem Namen der Komponente entspricht. Lassen Sie uns das tun:

<template>
	<User />
</template>

Erstellen Sie eine Komponente Employee. Binden Sie sie in die Hauptkomponente ein.