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 կոմպոնենտը:
Միացրեք այն հիմնական կոմպոնենտին:
