Vue: Memahami Komponen Global pada Vue

Pada bagian sebelumnya, kita telah membahas beberapa properti dan fitur yang ada dalam Vue Instance serta Reactivity, Directive, Method, Computed Property, Watchers, dan Lifecycle Hook. Bagi kalian yang telah menggunakan Library/Front-End Framework baru lainnya, mungkin kalian telah memperhatikan bahwa disini kita belum membahas salah satu bagian penting dari UI Development yang Modern yaitu Component (Komponen).


Komponen pada Vue

Vue memberikan kemampuan bagi kita untuk membuat komponen yang terisolasi di dalam suatu aplikasi. Reusability (Penggunaan Ulang) dan Maintainability (Pengelolaan) adalah alasan utama serta perlu diperhatikan untuk mengembangkan aplikasi dengan komponen yang terstruktur.

Komponen Vue dapat diartikan sebagai modul yang mandiri karena kita dapat mengelompokkan markup (HTML), logika (JS), dan Style (CSS) di dalamnya. Hal itu tentu saja dapat membuat perawatan yang lebih mudah, terutama ketika aplikasi yang dibuat telah berkembang menjadi skala yang jauh lebih besar.

Hal yang perlu diingat adalah bahwa komponen Vue adalah Vue Instance. Artinya, hampir semua properti yang telah kita lihat pada bagian yang sebelumnya (kecuali untuk beberapa pilihan tingkat root) dalam Root Instance juga berlaku pada komponen. Bahkan, dokumentasi Vue menjelaskan bahwa "komponen [Vue] adalah Vue Instance yang dapat digunakan kembali (Reusable) dengan sebuah nama...".

Agar kalian dapat memahami tentang komponen, mari kita belajar serta melanjutkan cara untuk membuat komponen pada Vue.

Membuat Aplikasi Twitter dengan Vue

Disini, kita akan belajar cara membuat aplikasi yang mirip seperti Twitter untuk menampilkan daftar tweet dari sumber data.

Membuat Aplikasi Twitter dengan Vue

Sumber data akan tersedia untuk kita (Client Side) dan akan diteruskan ke properti data instance pada aplikasi:

const tweet = [{
  id: 1,
  nama: 'Yasya',
  username: '@Yasya',
  gambar: './images/avatar.png',
  tweet: "Barang siapa yang bersungguh-sungguh, maka dia akan mendapatkan hasilnya.",
  suka: 30,
},
{
  id: 2,
  nama: 'Agung',
  username: '@Agung',
  gambar: './images/avatar.png',
  tweet: 'Barang siapa yang bersabar, maka dia akan mendapatkan keberuntungan.',
  suka: 25,
},
{
  id: 3,
  nama: 'Arman',
  username: '@Arman',
  gambar: './images/avatar.png',
  tweet: 'Barang siapa yang berjalan pada jalannya, maka dia akan sampai.',
  suka: 20,
}
];

new Vue({
  el: '#aplikasi',
  data: {
    tweet
  }
});


Dengan mem-binding Informasi yang hanya pada tweet pertama di dalam Template, dokumen HTML kita akan terlihat seperti berkut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tutorial Vue | EL Creative Academy</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://unpkg.com/bulma@0.7.4/css/bulma.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" />
</head>

<body>
  <div id="aplikasi">    
    <div class="tweet">
      <div class="box">
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img :src="tweet[0].gambar">
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p>
                <strong>{{tweet[0].nama}}</strong>
                <small>{{tweet[0].username}}</small>
                <br>
                {{tweet[0].tweet}}
              </p>
            </div>
            <div class="level-left">
              <a class="level-item">
                <span class="icon is-small">
                  <i class="fas fa-heart"></i>
                </span>
                <span class="suka">
                  {{tweet[0].suka}}
                </span>
              </a>
            </div>
          </div>
        </article>
      </div>
      <div class="control has-icons-left">
        <input class="input is-small"
        placeholder="Tweet balasan anda..." />
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="./main.js"></script>
</body>
</body>
</html>


Disini, kita telah menggunakan Library Font Awesome untuk dapat menampilkan Icon dan mereferensikan gambar yang disimpan di dalam folder images.

Dengan bantuan Styling yang sesuai, aplikasi yang kita buat akan terlihat seperti berikut:

Contoh 1

Tujuan kita disini adalah untuk menampilkan elemen tweet pada setiap objek tweet yang tersedia pada data. Karena kita akan me-Render daftar elemen, cara yang tepat untuk melakukannya adalah dengan menggunakan bantuan dari Directive v-for:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tutorial Vue | EL Creative Academy</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://unpkg.com/bulma@0.7.4/css/bulma.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" />
</head>

<body>
  <div id="aplikasi">    
    <div class="tweet" v-for="tweets in tweet" :key="tweet.id">
      <div class="box">
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img :src="tweets.gambar">
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p>
                <strong>{{tweets.nama}}</strong>
                <small>{{tweets.username}}</small>
                <br>
                {{tweets.tweets}}
              </p>
            </div>
            <div class="level-left">
              <a class="level-item">
                <span class="icon is-small">
                  <i class="fas fa-heart"></i>
                </span>
                <span class="suka">
                  {{tweets.suka}}
                </span>
              </a>
            </div>
          </div>
        </article>
      </div>
      <div class="control has-icons-left">
        <input class="input is-small"
        placeholder="Tweet balasan anda..." />
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="./main.js"></script>
</body>
</body>
</html>


Pada template di atas, kita telah mengikat konten dari objek tweet yang di-iterasikan ke template kita. Hal ini tentu saja akan membuat daftar elemen tweet dengan setiap elemen yang berisi rincian dari setiap objek tweet:

Objek Tweet

Komponen Global pada Vue

Jika kita melihat pada UI yang telah kita buat, kita dapat melihat dengan jelas bagian-bagian dari aplikasi yang dapat dibuat menjadi modul yang mandiri.

Komponen Global pada Vue

Root Instance menyerupai seluruh bagian dari aplikasi sementara Komponen Tweet bisa menjadi instance yang mengisolasi markup dan bertanggung jawab atas setiap elemen tweet.

Sekarang, mari kita lanjutkan dengan membuat Komponen Tweet. Metode paling singkat untuk membuatnya adalah dengan menggunakan konstruktor Vue.component().

Vue.component('komponen-tweet', {
  // options
});


Konstruktor Vue.component() akan meregisterkan komponen secara global dalam suatu aplikasi. Pada konstruktor di atas, argumen pertama yang telah kita berikan adalah nama dari komponen - komponen-tweet. Pada argumen kedua, kita telah mengirimkan pilihan objek yang kosong dan dapat berisi definisi dari komponen seperti data, metode, dll.

Meskipun terdapat beberapa cara yang berbeda untuk mendeklarasikan komponen pada Template, cara yang paling standar untuk melakukannya adalah dengan menggunakan opsi template yang mengharapkan nilai berupa string.

Untuk memulainya, kita akan membuat komponen-tweet dengan data Hard-Coded. Disini, kita akan menentukan komponen pada Template untuk menjadi markup yang terkait dengan elemen <div class="tweet"> ... </div> serta membuat komponen tersebut tepat sebelum instantiasi dari Root Instance.

Vue.component('komponen-tweet', { 
  template: `   
  <div class="tweet">
    <div class="box">
      <article class="media">
        <div class="media-left">
          <figure class="image is-64x64">
            <img src="./images/avatar.png">
          </figure>
        </div>
        <div class="media-content">
          <div class="content">
            <p>
              <strong>Yasya</strong>
              <small>@Yasya</small>
              <br>
               Barang siapa yang bersungguh-sungguh, maka dia akan mendapatkan hasilnya. 
            </p>
          </div>
          <div class="level-left">
            <a class="level-item">
              <span class="icon is-small">
                <i class="fas fa-heart"></i>
              </span>
              <span class="likes">
                10
              </span>
            </a>
          </div>
        </div>
      </article>
      </div>
      <div class="control has-icons-left">
        <input class="input is-small" placeholder="Tweet balasan anda..." />
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
      </div>
    </div>
  </div>
  `
});


Disini, kita telah mendeklarasikan template dari komponen di dalam backticks (Template Literal ES6) untuk dapat mengatur markup dengan rapih dalam format multi-line.

Info: Template Literal adalah fitur yang tidak di dukung oleh Browser lama seperti Internet Explorer 11.

Dengan komponen yang telah dibuat, sekarang kita dapat merender komponen ke dalam template root. Disini kita menginginkan komponen untuk dirender pada setiap tweet yang ada di dalam array tweet. Karena kita ingin merender daftar komponen-tweet, kita harus mendeklarasikan directive v-for tepat di mana komponen yang sedang dirender.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tutorial Vue | EL Creative Academy</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://unpkg.com/bulma@0.7.4/css/bulma.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" />
</head>

<body>
  <div id="aplikasi">    
   <komponen-tweet v-for="tweets in tweet" :key="tweet.id"></komponen-tweet>
 </div>
 <script src="https://unpkg.com/vue"></script>
 <script src="./main2.js"></script>
</body>
</body>
</html>


Hasilnya akan terlihat seperti berikut:

Hasil Template

Lihat kode di Github | Lihat Live Demo

Catatan: Contoh kode diatas adalah aplikasi yang sangat sederhana, untuk aplikasi yang lebih besar lagi, sangat penting untuk membuat penamaan komponen yang baik dan terstruktur.

Meskipun kita telah berhasil membuat daftar komponen, aplikasi tersebut tidaklah sesuai dengan keinginan kita karena setiap komponen akan memberikan informasi statis yang sama. Hal sebenarnya yang kita inginkan adalah memiliki template dari setiap komponen tweet yang memberikan rincian objek tweet dari array tweet.

Data Array tweet adalah bagian dari root instance dan komponen-tweet umumnya tidak mengetahui keberadaannya. Karena komponen-tweet dirender sebagai Child dari root instance, kita dapat menggunakan suatu hal yang disebut dengan istilah Props untuk meneruskan data yang relevan ke dalam komponen tersebut.

Sebelum memperbarui aplikasi diatas, Pada artikel berikutnya kita akan membahas tentang Props agar komponen tersebut berisi data yang kita butuhkan.

0 Komentar