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 කොටස සාදන්න.
එය ප්රධාන කොටසට සම්බන්ධ කරන්න.
