6 Cara Mendefinisikan Component di Vue.js

Pendahuluan

Component menjadi salah satu bagian yang sangat berguna untuk mengelompokkan sebuah fungsi agar bisa digunakan berulang kali. Pengelompokkan fungsi ini berguna untuk mempercepat proses development dan proses maintenance dikemudian hari, karena sebagai programmer, kita akan dimudahkan dengan hanya mengubah code yang ada di component, maka secara otomatis semua perubahan tersebut akan diterapkan pada semua halaman yang menggunakan component tersebut.

Sepanjang pemahaman penulis, ada 6 cara mendefinisikan component di Vue.js.

Baca Juga: Aplikasi E-Commerce Laravel 6 #20: Auto Upload Produk Marketplace

Plain Strings

Cara cepat dan mudah dalam mendefinisikan Vue component adalah dengan menambahkan property template yang berisi markup yang ingin anda kelompokkan. Metode ini digunakan hanya untuk fungsi yang sederhana karena Anda akan kesulitan menggunakannya ketika diterapkan pada kasus yang lebih kompleks.

Vue.component('my-checkbox', {
  template: '<p>Belajar Templating by <b>{{ title }}</strong</p>',
  data() {
    return {
      title: 'daengweb.id'
    }
  }
});

Template Literals

Penerapan yang lebih kompleks, teknik lainnya biasa disebut template literals dengan menggunakan backticks. Tidak seperti plain strings, metode ini mengizinkan untuk meng-embed expressions dan bisa multi-line.

Dengan adanya fitur multi-line, kita bisa mengimplementasikan code yang lebih kompleks karena markup menjadi readable sehingga memudahkan untuk proses development.

Vue.component('my-checkbox', {
  template: `
    <div>
      <input type="checkbox" v-model="status" /> Status

      <p>
        <span v-if="status">Postingan Sudah Dipublish</span>
        <span v-else>Postingan Dalam Draft</span>
      </p>
    </div>
  `,
  data() {
    return {
      status: false,
      title: 'daengweb.id'
    }
  }
});

X-Templates

Metode ini digunakan untuk mendefinisikan template ke dalam script tag. Teknik yang digunakan untuk menerapkan nya adalah dengan memberikan atribut type="text/x-template" dan id yang nantinya akan dihubungkan dengan Vue component.

Kelebihan dari x-template adalah memungkinkan kita untuk menuliskan markup template langsung ke dalam HTML file. Kekurangannya adalah ketika mendefinisikan component ini, codingannya terpisah menjadi dua bagian sehingga agak sulit untuk mencari keterkaitannya.

//app.js

Vue.component('app-post', {
  template: '#post-template',
  data() {
    return {
    	title
    }
  },
  methods: {
    submit() {
    	console.log('cek')
    }
  }
});

<!-- index.html -->

<div id="app">...</div>
<script type="text/x-template" id="post-template">
  <div class="form-group">
  	<label>Title</label>
  	<input class="form-control" v-model="title">
  </div>
  <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
</script>

Inline Templates

Pendekatan menggunakan inline-template hampir sama dengan x-templates, hanya saja cara ini bisa secara langsung dituliskan ke dalam markup html. Pastikan untuk menambahkan attribut inline-template, sehingga Vue tahu dimana bisa menemukannya.

Adapun kekurangan dan kelebihannya sama saja dengan x-template, tapi satu hal yang menjadi nilai tambahnya adalah template bisa dituliskan secara langsung ke dalam body, sehingga content yang di-load bisa di crawl untuk kebutuhan SEO.

Vue.component('post-template', {
  data() {
    return {
    	title: ''
    }
  },
  methods: {
    submit() {}
  }
});

<div id="app">
  <post-template inline-template>
    <div class="form-group">
      <label>Title</label>
      <input class="form-control" v-model="title">
    </div>
    <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
  </post-template>
</div>

JSX

JSX adalah ekstension Javascript yang mengizinkan kamu untuk menggunakan syntax khusus ke dalam Javascript code. Teknik ini dipopulerkan oleh React, sehingga opsi ini paling kontroversial di Vue, karena beberapa developer mengganggapnya tidak "cantik", tidak intuitif dan sebagai bentuk pengkhianatan terdapat etos Vue.

Vue.component('my-checkbox', {
  data() {
    return {
    	title: ''
    }
  },
  methods: {
    submit() {}
  },
  render() {
    return <div class="form-group">
      <label>Title</label>
      <input class="form-control" v-model="title">
    </div>
    <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
  }
});

Single-file Components

Salah satu fitur yang cukup populer dari Vue.js adalah Single-File Component (SFC). Fitur ini memungkinkan kamu untuk menuliskan component ke dalam sebuah file terpisah. Component ini di-compile oleh vue-loader ke dalam render functions, jadi kamu bisa mendapatkan performance runtime yang cukup baik.

Untuk membuat SFC, kamu bisa membuat file dengan ekstensi .vue, misalnya: Post.vue. Kemudian definisikan template tag dan script tag. Nantinya kita bisa meng-import file ini ke dalam main Vue app.

<template>
  <div class="form-group">
    <label>Title</label>
    <input class="form-control" v-model="title">
  </div>
  <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
</template>
<script>
    export default {
      data() {
        return {
        	title: ''
        }
      },
      methods: {
        submit() {}
      }
    };
</script>

Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #6: API Mengelola Armada

Kesimpulan

Mana yang terbaik diantara 6 cara mendefinisikan component di Vue.js? Jawabannya tentu saja sangat relatif, tergantung kebutuhan anda. Tapi jika harus memilih, fitur Single-File Component adalah opsi yang cukup powerful hampir disemua skenario.

Setiap pilihan yang tersedia adalah alat yang bisa digunakan untuk memenuhi kebutuhan kita sebagai developer. Jadi, perlakukanlah sebagai alat & selesaikan segera masalah yang kamu hadapi.