Komponen adalah Vue instance yang dapat digunakan kembali pada kasus ini, contoh : <button-counter>. Kita bisa menggunakan komponen ini sebagai kustom elemen di dalam instance root Vue yang dibuat dengan new Vue:
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
Karena komponen adalah Vue instance yang bisa digunakan kembali, mereka menerima opsi yang sama dengan new Vue, seperti data, computed, watch, methods, dan kait siklus hidup (lifecycle hooks). Satu-satunya pengecualian adalah beberapa opsi khusus seperti el.
Sebagai contoh, Anda mungkin memiliki komponen header, bilah samping (sidebar), dan area konten, masing-masing biasanya berisi komponen lain untuk tautan navigasi, posting blog, dan sebagainya.
Untuk menggunakan komponen ini dalam templat, mereka harus didaftarkan agar Vue tahu tentang mereka. Ada dua tipe untuk mendaftarkan: global dan local.
Global Component
Komponen yang terdaftar secara global dapat digunakan dalam templat dari instance Vue Root (new Vue) yang dibuat setelahnya – dan bahkan di dalam semua sub komponen dari pohon komponen Vue instance.
Vue.component('nama-komponen-saya', {Komponen ini teregistrasi secara global. Itu berarti mereka dapat digunakan di dalam template dari semua root Vue Instance (new Vue) dibuat setelah diregistrasi. Sebagai contoh:
// ... pilihan ...
})
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<div id="app">Ini bahkan berlaku kepada semua sub komponen, berarti tiga komponen tersebut juga tersedia di dalam satu sama lain.
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
Local Component
Registrasi global jarang menjadi ideal. Sebagai contoh, ketika Anda menggunakan build system seperti Webpack, meregistrasi global semua komponen berarti ketika Anda berhenti menggunakan sebuah komponen, itu juga masih termasuk di final build Anda. Ketidakperluan ini menambah banyak Javascript yang harus di unduh oleh pengguna Anda.
Pada kasus ini, Anda bisa menetapkan komponen Anda sebagai objek Javascript sederhana:
var ComponentA = { /* ... */ }Lalu tetapkan komponen komponen yang akan Anda gunakan di opsi komponen
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({Untuk setiap properti di dalam objek components, kuncinya akan menjadi nama dari elemen custom, ketika nilai akan berisi pilihan objek dari komponen tersebut.
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
Catat bahwa komponen yang terdaftar secara lokal juga tidak terdapat di dalam sub komponen.
Mixins
Mixins adalah sebuah cara yang fleksibel untuk mendistribusikan beberapa fungsi yang bisa dipakai di semua komponen Vue. Object pada mixin bisa berisi beberapa opsi di komponen. Ketika sebuah komponen menggunakan mixin, maka semua opsi yang ada di dalam mixin akan di “mix” (digabungkan) dengan opsi komponen itu sendiri.
Contoh Kasus :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Content Distribution with Slots </title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='lib/jquery.min.js'></script>
<script src='lib/bootstrap.min.js'></script>
<script src='lib/vue.js'></script>
<link href='lib/bootstrap.min.css' rel="stylesheet" />
</head>
<body>
<div id="app">
<h2>Contoh Mixins</h2>
<button v-on:click="hello()">Mixins</button>
<button v-on:click="helloComponent()">Component</button>
</div>
<script type="text/javascript">
// mendefinisikan object mixin
var myMixin = {
methods: {
hello: function () {
alert('hai, ini dari mixin!')
}
}
}
var vm = new Vue({
el: "#app",
mixins: [
myMixin
],
methods:{
helloComponent:function(){
alert('hai, ini dari component!')
}
}
})
</script>
</body>
</html>
Tampilan Contoh Mixins
Contoh menggunakan method mixins
Contoh menggunakan method vue instance
Pada contoh diatas, membuat mixin dengan method hello dan membuat method dalam vue instance yang akan menampilkan alert jika fungsi digunakan. Kemudian method dipanggil pada button untuk dijalankan fungsi nya. Bisa dilihat dalam satu instance vue terdapat method yang sama dengan yang ada di vue instance. Mixin itu bisa dibilang kumpulan function, bisa berupa method, computed, watch dll, yang bisa di reuse lagi di komponen lainnnya. Jadi sangat berguna untuk menghindari pembuatan fungsi yang sama secara berulang-ulang.
0 Komentar untuk "Component VueJs"