VueJs 2 – 06 Vue components

Reading Time: 4 minutes

හැමෝටම ආයුබෝවන්, VueJs ගැන ලියන 6 වෙනි post එකෙන් මම මේ කියන්න යන්නෙ Vue වල තියෙන ඉතා වැදගත් feature එකක් වෙන Vue components ගැන. Vue ගැන ලියපු කලින් posts බැලුවෙ නැත්තම් මෙතනින් ගිහින් බලන්න.

අපි vue app එකක් ලියද්දි, ඒ app එකට අදාල template එක(html markup එක), app එක mount කරල තියෙන element එක ඇතුලෙ (index.html එක අැතුලෙ) කෙලින්ම ලියන්න පුළුවන්. මම කලින් උදාහරණවලදි කරා වගේ

const app = new Vue({
    el: '#my-app',
    data: { name: 'John Doe' }
});

<div id="my-app">
    <h1>Hello, {{ name }} </h1>
</div>

එහෙම නැත්තම්, app.js file එකේ තියෙන vue instance එක ඇතුලෙම template කියන property එකට, String එකක් විදියට දෙන්නත් පුළුවන්. මේ වගේ.

const app = new Vue({
    el: '#my-app',
    template: `<h1>Hello, {{ name }}</h1>`,
    data: { name: 'John Doe' }
});

දැන් මේ template එක, #my-app element එක ඇතුලෙ render වෙනව.

හැබැයි මේ විදියට ලියද්දි, template එකේ තියෙන elements, හැම තිස්සෙම තනි root element එකක් ඇතුලෙ තියෙන්න ඕනෙ. තේරුනේ නැත්තම් මේක බලන්නකො.

const app = new Vue({
    el: '#my-app',
    template: `
        <h1>Hello, {{ name }}</h1>
        <p>who are you?</p>
    `,
    data: { name: 'John Doe' }
});

මෙතනදි template එක විදියට elements 2ක් තියෙනව.(h1 එකක් සහ paragraph එකක්) ⁣ඒ දෙකම root level elements. ඒ නිසා මේක run වෙන්නෙ නැහැ. error එකක් එනව. මේක run වෙන්න නම් පහල තියෙන විදියට div එකකින් මේක wrap කරන්න පුළුවන්.

const app = new Vue({
    el: '#my-app',
    template: `
        <div>
            <h1>Hello, {{ name }}</h1>
            <p>who are you?</p>
        </div>
    `,
    data: { name: 'John Doe' }
});

දැන් ඔක්කොම elements තියෙන්නෙ div කියන root element එකේ නිසා ප්‍රශ්නයක් වෙන්නෙ නැහැ.

මේ මොන විදියට කරත්, app එකක් හදද්දි, මෙහෙම එකම template එකක් දිගට ලියාගෙන යද්දි, ඒක ගොඩක් සංකීර්ණ වෙන්න පුළුවන්. ඒ නිසා තමයි Vue components කියල දෙයක් තියෙන්නෙ. Vue component එකක් කියන්නෙ, app එකේ කුඩා කොටසක් වගේ. අපේ app එක කොටස් වලට වෙන් කරල, ඒ එක එක කොටස vue components  විදියට හදන්න පුළුවන්. උදාහරණයක් විදියට, ඔයාල blog එකක් හදනවනම්, ඒකෙ navbar එක වෙනම component එකක් විදියට හදන්න පුළුවන්. Blog post තව component එකක් විදියට හදන්න පුළුවන්. Post එකේ comments තව component එකක්. footer එක තව component එකක්. මේ වගේ ඔයාල කැමති විදියකට components වලට වෙන් කරන්න පුළුවන්. දැන් මේ components එකතු කරල app එක හදාගන්න පුළුවන්. Vue components නැවත නැවත භාවිතා කරන්නත් පුළුවන් නිසා ඒක සෑහෙන්න පහසුවක් වෙනව. App එකේ එක එක කොටස, එක එක component එකෙන් control වෙන නිසා, app එක maintain කරන එකත් ලේසියි.

Vue component එකක් මේ විදියට හදන්න පුළුවන්. මේ components හදන්නෙ Vue object එකට එළියෙන්, Vue object එකට කලින්.

Vue.component('test', {});

මෙතනදි පළවෙනි parameter එක විදියට දෙන්න ඕනෙ, component එකේ නම(test). දෙවනි parameter එක විදියට දෙන්නෙ object එකක්. ඒ object එකේ තියෙන්නෙ component එකට අදාල properties. Vue instance එකට pass කරන object එක වගේම object එකක් තමයි මේකත්. ඒකෙදි වගේම data, methods, template, created වගේ properties define කරන්න පුලුවන්.(හැබැයි el වගේ root vue instance එකට විශේෂිත වුනු properties define කරන්න බැහැ.) ඒ define කරන properties අදාල වෙන්නෙ, ඒව define කරල තියෙන component එකට විතරයි.

Vue.component('test', {
    template: '<h1>Hello! This is a Vue Component</h1>'
});

const app = new Vue({
 el: '#my-app',
});

මේ විදිය හදා ගත්ත component එක, app එක mount කරල තියෙන element එක(#my-app) ඇතුලෙ ඕන තැනක භාවිතා කරන්න පුළුවන්. හරියට custom html element එකක් වගේ. මේ විදියට.

<div id="my-app">
    <test></test>
</div>

දැන් මේක run කරාම, මේ වගේ output එකක් බලාගන්න පුලුවන් වෙයි. ඔයාලට බලාගන්න පුළුවන් test කියන tag එක වෙනුවට, test component එකේ තියෙන template එක render වෙලා තියෙනව.

data is a function

Vue component වලට අදාලව වෙනම data, methods වගේ properties define කරන්න පුලුවන් කියල මම කලින් කිව්වනෙ. හැබැයි component එකක් ඇතුලෙ define කරන data property එකේ පොඩි වෙනසක් තියෙනව. කලින් අපි, main Vue instance එකේදි, data property එක object එකක් විදියට තමයි define කරේ. හැබැයි component එකක් ඇතුලෙදි ඒක function එකක් විදියට තමයි define කරන්න ඕනෙ. ඒ function එකෙන් object එකක් return කරන්න ඕනෙ. ඒ object එකේ තමයි component එකට අදාල data define කරන්නෙ. data කියන property එක විතරයි මේ විදියට වෙනස් වෙන්න ඕනෙ. අනිත් ඒවයි වෙනසක් නැහැ. පහලින් තියෙන්නෙ component එකක් ඇතුලෙ data property එක define කරන්න විදිය.

Vue.component('test', {
    template: '<h1> {{message}} </h1>',
    data: function () {
        return {
            message: 'Hello! This is a Vue Component'
        }
    }
});

const app = new Vue({
    el: '#my-app',
});

මම කලිනුත් කිව්ව, එක Vue component එකක්, අපි කැමති වතාවක් නැවත නැවත භාවිතා කරන්න පුළුවන් කියල. එහෙම භාවිතා කරාම, ඒ එකම component එකේ විවිද instances, එක්නෙකින් ස්වායත්තව තමයි වැඩ කරන්නෙ. පහල උදාහරණය බලන්නකො.

Vue.component('test', {
    template: `
        <div>
            <h1> count: {{ count }} </h1>
            <button @click="count++">count++</button>
        </div>
    `,
    data: function () {
        return {
            count: 0,
        }
    }
});

const app = new Vue({
    el: '#my-app',
});

<div id="my-app">
    <test></test>
    <test></test>
</div>

මෙතනදි test කියන component එක දෙපාරක් භාවිතා කරල තියෙනව. ඒනිසා count++ කියල button 2ක් තියෙනව. හැබැයි මේ button click කරද්දි ඒ ඒ button එකට අදාල instance එකේ count එක විතරයි increment වෙන්නෙ. එකම component එකේ instance 2 ක් උනාට, ඒ දෙක වෙන වෙනම තමයි වැඩ කරන්නෙ. හරියට වෙනස් component 2 ක් වගේ.

දැන් ඔයාලට Vue components කියන්නෙ මොනවද කියල පොඩි හරි අදහසක් එන්න ඇති කියල හිතනව. අදට මෙතනින් නවතින්නම්. post එක ගැන අදහස්, යෝජනා, ඡෝදනා, ප්‍රශ්න මොනවම හරි තියෙනම් comment එකක් දාන්න. 😀

ඊළඟ post එකට මෙතනින් යන්න.