VueJs 2 – 07 more about Vue components

Reading Time: 5 minutes

හැමෝටම ආයුබෝවන්, මේ VueJs ගැන ලියන 7 වෙනි post එක. අද post එකෙනුත් මම vue components ගැනම තමයි කියන්න යන්නෙ. විශේෂයෙන්, vue component එකක් ප්‍රායෝගිකව කොහොමද භාවිතා වෙන්නෙ කියල සහ props කියන්නෙ මොනවද කියල. කලින් posts බැලුවෙ නැත්තම් මෙතනින් ගිහින් බලන්න.

අපි අද පොඩි app එකක් හදමු. හිතමුකො අපි හදනව කියල, මේ වගේ පොඩි පොඩි messages display කරන්න පුළුවන් blog එකක්.

ගොඩක් අය bootstrap ගැන දන්න නිසා, මම මේක style කරන්න bootstrap පාවිච්චි කරනව. ඒ නිසා bootstrap CDN එකත් index.html එකේ include කරන්න ඕනෙ. Blog එකේ messages display කරන්න bootstrap වල තියෙන මෙන්න මේ card කියන component එක භාවිතා කරනව. ඒකට අදාල template එක getbootstrap.com එකෙන් ගන්න පුළුවන්.

<div class="card text-white bg-primary mb-3">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

හැම message එකක්ම display කරන්නෙ මේ card කියන component එක භාවිතා කරල නිසා, ඒක Vue component එකක් විදියට හදා ගත්තම නැවත නැවත භාවිතා කරන්න පුළුවන්. ඒක කරන්නෙ කොහොමද කියල අපි බලමු.

හරි, මේ component එකේ තියෙන්නෙ, blog එකේ තියෙන message එකක් නිසා අපි මේකට blog-message කියල නම දාමු. ඊළගට මේකට අදාල template එක මේ විදියට set කරන්න පුළුවන්.

Vue.component('blog-message', {
    template: `
        <div class="card bg-light mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    `,
});

මෙහෙම තිබුනට මේ component එකෙන් වැඩක් ගන්න අමාරුයි. මොකද මේ component එකේ තියෙන message එක hard code කරලනෙ තියෙන්නෙ. ඉතිං මේ component එක කිහිප වතාවක් භාවිතා කරොත් එකම message එක තමයි පෙන්නන්නෙ. ඒ නිසා මේ component එකේ තියෙන contents වෙනස් කිරීමේ හැකියාව තියෙන්න ඕනෙ, ඒ වගේම මේකෙ එක එක instance වල, වෙනස් වෙනස් message display කිරීමේ හැකියාව තියෙන්න ඕනෙ. ඒක කරන්න පුළුවන් props හාවිතා කරල.

props

Props වලින් කරන්නෙ, අපි හදපු component එකට, පිටින් මොනවහරි data pass කරන්න ඉඩ දෙන එක. ඒව(Props) හරියට, අපි හදපු custom element එකේ තියෙන custom attributes වගේ. ⁣අපේ component එකේ, title එක සහ body එක වෙනස් කිරීමේ හැකියාව තියෙන්න ඕනෙ. ඒ වගේම ඒ data, පිටින් ලබාගැනීමේ හැකියාව තියෙන්න ඕනෙ. ඒ නිසා අපි title සහ body කියල props 2ක් මගින් ඒ data, මේ component එ⁣කට pass කරමු. ඒක මේ විදියට කරන්න පුලුවන්.

<div id="my-app">
    <div class="container" style="margin-top: 10px">
        <blog-message title="First post" body="the body of the first post"></blog-message>
        <blog-message title="Second post" body="The body of the second post"></blog-message>
        <blog-message title="Third post" body="The body of the third post"></blog-message>
    </div>
</div>

මේ විදියට props හරහා pass කරපු data, component එක ඇතුලෙදි සාමාන්‍ය data වගේම පාවිච්චි කරන්න පුළුවන්. හැබැයි මේ විදියට props හරහා pass කරපු data, component එක ඇතුලෙදි භාවිතා කරන්න නම්, component එක ඇතුලෙ භාවිතා කරන props මොනවද කියල, component එකේ define කරල ති⁣යෙන්න ඕනෙ. පහල තියෙන code එක බලන්නකො. ඒකෙ component එක ඇතුලෙ props කියන property එකෙන් මම කරල තියෙන්නෙ ඒක. (එ්කෙ තේරුම තමයි, මේ component එකට title සහ body කියල props 2ක් pass කරන්න පුළුවන් කියන එක.) දැන් title සහ body කියන දෙක, සමාන්‍ය data 2ක් වගේම භාවිතා කරන්න පුළුවන්.

Vue.component('blog-message', {
    props: ['title', 'body'],
    template: `
        <div class="card bg-light mb-3">
            <div class="card-header">{{ title }}</div>
            <div class="card-body">
                <p class="card-text">{{ body }}</p>
            </div>
        </div>
    `,
});

මේක run කරාම පහල image ඒකේ තියෙන විදියෙ output එකක් එන්න ඕනෙ.

දැන් අපිට විවිද messages ⁣display කරන්න පුළුවන් component එකක් තියෙනව.

page එකේ display කරන ඔක්කොම messages ටික main Vue instance එකේ store කර ගන්න පුළුවන්. දැනට අපි මේ data, hard code කරල තියමු. ඊළග post එකෙන් කියන්නම් back-end එකෙන් මේව අරගන්න විදිය. මේ විදියට messages කියල object එකක තමයි ඒක මම store කරන්නෙ.

const app = new Vue({
    el: '#my-app',
    data: {
        messages:{
            {title: 'First post', body: 'The body of the first post'},
            {title: 'Second post', body: 'The body of the second post'},
            {title: 'Third post', body: 'The body of the third post'},
        }
    }
});

දැන් මෙහෙම store කරපු messages ටික, v-for එක භාවිතා කරල, එක message එකට එක component එක ගානෙ output කරන්න පුළුවන්. ඒ වගේම v-bind එකෙන් පුළුවන් ඒ එක එක instance එකට අදාල title එක සහ body එක bind කරන්න. මේ විදියට.

Vue.component('blog-message', {
    props: ['title', 'body'],
    template: `
        <div class="card bg-light mb-3">
            <div class="card-header">{{ title }}</div>
            <div class="card-body">
                <p class="card-text">{{ body }}</p>
            </div>
        </div>
    `
});

const app = new Vue({
    el: '#my-app',
    data: {
        messages:{
            {title: 'First post', body: 'The body of the first post'},
            {title: 'Second post', body: 'The body of the second post'},
            {title: 'Third post', body: 'The body of the third post'},
        }
    },
});

<div id="my-app">
    <div class="container" style="margin-top:10px">
        <blog-message v-for="message in messages" v-bind:title="message.title" v-bind:message="message.body"/>
    </div>
</div>

add new message

දැන් අපි මේකෙ messages display කරන කොටස හදල ඉවරයි. අපි කොහොමද අලුත් message එකක් මේකට add කරන්නෙ. දැන් අපි බලමු ඒක කරන්නෙ කොහොමද කියල.

ඉස්සෙල්ලම අපි හදා ගමු message එක type කරන්න අවශ්‍ය form එක.

<form style="padding:10px" class="col-sm-8 bg-light mb-3">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" v-model="newTitle" class="form-control" placeholder="Message title" required>
    </div>
    <div class="form-group">
        <textarea v-model="newBody" class="form-control" rows="3" placeholder="Message body" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

මේ තියෙන්නෙ ඒ form එක. මේක මේ විදියට index.html එකේ enter කරන්න පුළුවන්.

<div id="my-app">
  <div class="container" style="margin-top:10px">
    <form style="padding:10px" class="col-sm-8 bg-light mb-3">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" v-model="newTitle" class="form-control" placeholder="Message title" required>
      </div>
      <div class="form-group">
        <textarea v-model="newBody" class="form-control" rows="3" placeholder="Message body" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <h1>Recent Messages</h1>
    <blog-message v-for="message in messages" :title="message.title" :body="message.body"></blog-message>
  </div>
</div>

මේ form එකේ තියෙන message title එක සහ message body එක store කරගන්න, newTitle, newBody කියල data 2ක් define කරගන්න පුළුවන්. v-model directive එක භාවිතා කරල, form එකේ title සහ body කියන text field දෙකට,  ඒ data 2 bind කරලයි තියෙන්නෙ.

data: {
    newTitle: '',
    newBody: '',
    messages: []
}

හරි දැන් form එකත් හරි. දැන් තියෙන්නෙ add button එක click කරාම, post එක add වෙන functionality එක හදන්න. ඒකට අදාල code එක methods object එක ඇතුලෙ ලියන්න පුළුවන්. අපි ඒක addPost කියල method එකක ලියමු. පොඩි දෙයයි කරන්න තියෙන්නෙ. newTitle එක සහ newBody එක අඩංගු object එකක් messages කියන array එකට add කරන්න තියෙන්නෙ. එතකොට message කියන data එක වෙනස් වෙන නිසා, Vue වලින් automaticallyම ආපහු ඔක්කොම messages ටික render කරනව. මේ තියෙන්නෙ ඒකට අදාල code එක.

methods: {
    addMessage: function () {
        this.messages.unshift({
             title: this.newTitle,
             body: this.newBody
        })
        this.newTitle = ''
        this.newBody = ''
    }
}

දැන්, form එක submit කරද්දි මේ method එක call කරාම හරි. ඒකට v-on:submit directive එක භාවිතා කරන්න ඕනෙ. සම්පූර්ණ code එක ⁣පහළ තියෙනව.

Vue.component('blog-message', {
    props: ['title', 'body'],
    template: `
        <div class="card bg-light mb-3">
            <div class="card-header">{{ title }}</div>
            <div class="card-body">
                <p class="card-text">{{ body }}</p>
            </div>
        </div>
    `,
});

const app = new Vue({
    el: '#my-app',
    data: {
        newTitle: 'Title',
        newBody: 'Message body',
        messages: []
    },

    methods: {
        addMessage: function () {
            this.messages.unshift({ title: this.newTitle, body: this.newBody }) 
            this.newTitle = '' 
            this.newBody = '' 
         }
    }
});

<div id="my-app">

  <div class="container" style="margin-top:10px">
    <form style="padding:10px" class="col-sm-8 bg-light mb-3" @submit.prevent="addMessage()">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" v-model="newTitle" class="form-control" placeholder="Message title" required>
      </div>
      <div class="form-group">
        <textarea v-model="newBody" class="form-control" rows="3" placeholder="Message body" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <h1>Recent Messages</h1>
    <blog-message v-for="message in messages" :title="message.title" :body="message.body"></blog-message>
  </div>
</div>

දැන් බොහෝ දුරට app එක හදල ඉවරයි. add කරන Messages, locally store කරගන්න දැන් අපිට පුළුවන්නෙ. අදට මම මෙතනින් නවත්තන්නම්. දැන් ඔයාලට යම් අදහසක් එන්න ඇති, කලින් post වල මම කියපු දේවල් කොහොමද ප්‍රායොගිකව භාවිතා වෙන්නෙ කියල. ඊළග post එකෙන් මම කියන්නම් database එකක store කිරීම සදහා, back-end එකට මේ messages යවන්නෙ කොහොමද කියල. සහ back-end එකෙන් නැවත ඒව අරගන්නෙ කොහෙමද කියල. post එක ගැන අදහස්, යෝජනා, ඡෝදනා, ප්‍රශ්න මොනවම හරි තියෙනම් comment එකක් දාන්න. 😀

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