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 компоненттин жасаңыз. Аны негизги компонентке туташтырыңыз.