Сохтани компонентҳои фардӣ дар Vue

Компонентҳо дар дохили худ ҳамон сохтҳоро доранд, ки компоненти асосӣ, ки мо пештар бо он кор карда будем. Яъне дар файли ҳар як компонент хоҳад буд тегҳои script ва template.

Барои мисол биёед як компонент бо номи User созем. Коди онро дар файли мувофиқ ҷойгир кунем:

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

Дар объекти data компонент метавон баъзе додаҳоро ҷойгир кард:

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

Ин додаҳоро дар намоиши компонент метавон баровард:

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

Ҳоло биёед сохта шудаи мо компонентро ба компоненти асосӣ пайваст кунем. Барои ин аввал онро ворид кунем:

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

Номи онро дар танзимоти components нависем:

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

Дар намоиши компоненти волидайн метавон намоиши компоненти фардӣро баровард. Барои ин бояд тег навишт, ки номи он мувофиқ аст ба номи компонент. Биёед инро анҷом диҳем:

<template>
	<User />
</template>

Як компоненти Employee созед. Онро ба компоненти асосӣ пайваст кунед.