Sebelumnya kita belajar tentang bagaimana membuat sebuah component sampai pada tingkatan passing data kedalam component, maka pada kesempatan kali ini kita akan mencoba berbagai case untuk menambah pemahaman kita seputar component. Mengingatkan kembali bahwa dengan component kita dapat membuat sebuah template yang sifatnya reusable.
Directive v-model & Component
Pada case kali ini kita akan membuat sebuah component yang berfungsi untuk menampilkan data secara dinamis berdasarkan apa yang di input pada form yang disediakan, sehingga apabila tombol diklik maka secara otomatis component yang digunakan akan melakukan looping. Ohya sebelum memulai, kita menggunakan bootstrap sebagai layout. Langkah pertama buat component terlebih dahulu:
<!-- component -->
<template id="panel">
<div class="panel panel-primary">
<div class="panel-heading">
{{ listdata.judul }}
</div>
<div class="panel-body">
{{ listdata.konten }}
</div>
</div>
</template>
<!-- vue.component -->
Vue.component('panel', {
props: ['listdata'],
template: '#panel'
});
Pada code diatas kita telah memiliki custom component dengan tampilan panel bootstrap, dimana nantinya akan mem-passing data kedalam component dengan menggunakan props. Selanjutnya buat form input berikut:
<!-- HTML -->
<div class="form-group">
<label>Judul</label>
<input type="text" v-model="judul" class="form-control">
</div>
<div class="form-group">
<label>Konten</label>
<textarea v-model="konten" class="form-control"></textarea>
</div>
<div class="form-group">
<button class="btn btn-danger btn-sm" @click="simpan">Kirim</button>
</div>
<!-- Vue.js -->
new Vue({
el: '#dw',
data: {
judul: '',
konten: '',
lists: [
{
judul: 'Belajar vue',
konten: 'belajar vue dengan materi component'
}
]
},
methods: {
simpan() {
this.lists.push({
judul: this.judul,
konten: this.konten
})
}
}
});
Secara default kita telah memiliki sebuah data berupa objek array, dimana saat tombol diklik maka data tersebut akan ditambahkan dengan menggunakan method simpan(). Selanjutnya tambahkan code berikut untuk menampilkan data menggunakan custom component yang telah kita miliki
<panel v-for="list in lists" :listdata="list"></panel>
Code diatas melakukan looping dengan menggunakan directive v-for kemudian mengirim data ke component dengan menggunakan directive v-on:bind.
Maka code lengkapnya apabila digabungkan akan menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Computed Properties - Daengweb</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</head>
<body>
<div id="dw" class="container">
<div class="row">
<div class="col-md-12">
<panel v-for="list in lists" :listdata="list"></panel>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Judul</label>
<input type="text" v-model="judul" class="form-control">
</div>
<div class="form-group">
<label>Konten</label>
<textarea v-model="konten" class="form-control"></textarea>
</div>
<div class="form-group">
<button class="btn btn-danger btn-sm" @click="simpan">Kirim</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="panel">
<div class="panel panel-primary">
<div class="panel-heading">
{{ listdata.judul }}
</div>
<div class="panel-body">
{{ listdata.konten }}
</div>
</div>
</template>
<script type="text/javascript">
Vue.component('panel', {
props: ['listdata'],
template: '#panel'
});
new Vue({
el: '#dw',
data: {
judul: '',
konten: '',
lists: [
{
judul: 'Belajar vue',
konten: 'belajar vue dengan materi component'
}
]
},
methods: {
simpan() {
this.lists.push({
judul: this.judul,
konten: this.konten
})
}
}
});
</script>
</body>
</html>
Berkomunikasi Dengan Component: Custom Event
Best practice lain dalam berkomunikasi dengan component adalah membuat custom event, sebab tidak hanya berupa data yang dapat di-passing kedalam component tapi juga sebuah event. Maka pada contoh kali ini kita akan mencoba mempraktekkan membuat sebuah custom event yang akan digunakan oleh component.
<!-- HTML -->
<domain v-model="domain" @applied="cekDomains"></domain>
<p v-if="tersedia"><strong>{{ domain }}</strong> Tersedia!</p>
<!-- template -->
<template id="form">
<div>
<input class="form-control" ref="input" :value="value" @input="cekDomain($event.target.value)">
<button v-on:click="cekDomains" class="btn btn-danger">Cek</button>
</div>
</template>
<!-- Vue Component -->
Vue.component('domain', {
props: ['value'],
template: '#form',
methods: {
cekDomain(value) {
this.$emit('input', value);
},
cekDomains() {
this.$emit('applied');
}
}
});
<!-- Vue Instance -->
new Vue({
el: '#dw',
data: {
domain: '',
tersedia: false
},
methods: {
cekDomains() {
this.tersedia = true;
}
}
});
Pada code diatas kita membuat custom event bernama applied yang di-bind untuk mengakses method cekDomains pada component. Untuk berkomunikasi dengan child component, maka kita menggunakan $emit pada child component untuk mengeksekusi custom event tersebut.
Maka code lengkapnya akan menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Components - Daengweb</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</head>
<body>
<div id="dw" class="container">
<domain v-model="domain" @applied="cekDomains"></domain>
<p v-if="tersedia"><strong>{{ domain }}</strong> Tersedia!</p>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="form">
<div>
<input class="form-control" ref="input" :value="value" @input="cekDomain($event.target.value)">
<button v-on:click="cekDomains" class="btn btn-danger">Cek</button>
</div>
</template>
<script type="text/javascript">
Vue.component('domain', {
props: ['value'],
template: '#form',
methods: {
cekDomain(value) {
this.$emit('input', value);
},
cekDomains() {
this.$emit('applied');
}
}
});
new Vue({
el: '#dw',
data: {
domain: '',
tersedia: false
},
methods: {
cekDomains() {
this.tersedia = true;
}
}
});
</script>
</body>
</html>
Selain menggunakan props dan $emit, pendekatan lain yang dapat digunakan untuk berkomunikasi dengan component adalah dengan menggunakan refs yang dapat memberikan akses terhadap methods dari sebuah component lain.
<custom-component ref="cuscom"></custom-component>
CustomComponent.vue
export default{
methods:{
methodOnCustomComponent(){
// your own code here
}
}
}
Untuk memanggil method dari component di atas melalui component lain tinggal menggunakan "refs"
Vue.$refs.(ref name).(method name)
// contoh
this.$refs.cuscom.methodOnCustomComponent();
Comments