Komponen Vue: Memahami Props pada Vue

Pada bagian sebelumnya, kita telah membuat komponen pertama yang bernama komponen-tweet sebagai aplikasi yang mirip seperti Twitter. Tetapi, sejauh ini daftar yang ada di komponen-tweet hanyalah informasi statis.

Vue Statis

Lihat kode di Github | Lihat Live Demo

Tujuan kita kali ini adalah untuk membuat setiap komponen-tweet dapat me-render data tweet yang unik dari array data tweet yang disimpan dalam root instance. Kita dapat menyelesaikannya dengan bantuan Props.


Props pada Vue

Vue memberikan kita kemampuan dalam menggunakan Props untuk meneruskan data dari Parent Instance ke Child Instance.

 Props pada Vue

Menggunakan Props cukup sederhana. Langkah pertama akan melibatkan data binding yang akan diteruskan ke atribut prop di mana komponen child sedang dirender.

Pada aplikasi yang telah kita buat sebelumnya, kita ingin mengirimkan objek tweet tunggal ke setiap komponen-tweet yang dirender. Karena komponen-tweet dapat dirender dengan bantuan directive v-for, kita dapat melewatkan objek tweet yang di-iterasikan sebagai Props ke setiap komponen.
./index.html

    <div id="aplikasi">    
        <komponen-tweet v-for="tweets in tweet" :key="tweet.id" :tweet="tweets"></komponen-tweet>
    </div>


Kita akan menggunakan directive v-bind untuk mengikat objek data tweet yang di-iterasikan ke prop dengan nama yang sama.

Agar komponen-tweet menggunakan Props yang disediakan untuknya, maka kita perlu mendeklarasikan props yang diterimanya dengan opsi props. Kita akan menggunakan opsi Props ke dalam komponen-tweet dan menentukan prop tweet yang dikirimkan:

Vue.component('komponen-tweet', {
  template: ` 
    // ...
  `,
  props: ['tweet']
});


Pada komponen-tweet, prop tweet sekarang dapat diakses dan digunakan seperti properti data lainnya. Kita akan mengikat informasi dari prop tweet ke dalam template sebagai pengganti dari informasi statis.

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="tweet.gambar">
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p>
                <strong>{{tweet.nama}}</strong>
                <small>{{tweet.username}}</small>
                <br>
                 {{tweet.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="likes">
                  {{tweet.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>
  `,
  props: ['tweet']
});


Sekarang, aplikasi kita akan menampilkan informasi dari semua tweet yang berbeda ke dalam data instance.


Lihat kode di Github | Lihat Live Demo

Validasi Prop pada Vue

Vue juga dapat kita gunakan untuk menetapkan persyaratan pada Props yang dapat dilewatkan ke dalam komponen. Sebelumnya, kita telah mendeklarasikan prop tweet di dalam komponen-tweet dengan format seperti berikut:

Vue.component('komponen-tweet', {
  template: ` 
    // ...
  `,
  props: ['tweet']
});


Untuk menetapkan persyaratan validasi prop, kita dapat menyediakan objek yang memiliki persyaratan validasi untuk opsi props.

Vue.component('komponen-tweet', {
  template: ` 
    // ...
  `,
  props: {
    tweet: {
      type: Object,
      required: true
    }
  }
});


Jika kita telah menyatakan persyaratan validasi seperti di atas dan tidak melewati prop tweet atau meminta prop tweet menjadi tipe yang bukan Object, Vue Console akan menampilkan pesan peringatan. Dokumentasi Vue memiliki lebih banyak contoh tentang bagaimana kita dapat mendefinisikan persyaratan validasi default dan custom.

Kesimpulan

Sangat penting untuk diingat bahwa properti hanya dapat berjalan dengan format yang searah (Parent ke Child ke Grand Child, dll.). Jika kita ingin berkomunikasi dengan komponen Parent (mis. root Instance) tentang perubahan yang dibuat dalam komponen Child (mis. komponen-tweet), untuk mengatasi hal tersebut, Vue menyediakan sesuatu yang dikenal sebagai Custom Event.

0 Komentar