Praktikum 6
Component
A. Global Component
Hasil
B. Local Component
Hasil
Perbedaan Global Component dan Local Component
Hasil
A. Global Component
<!DOCTYPE html>
<html>
<head>
<title>Global Component</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app1">
<h1>Objek Vue 1</h1>
<component-a></component-a>
<component-b></component-b>
</div>
<div id="app2">
<h1>Objek Vue 2</h1>
<component-a></component-a>
<component-c></component-c>
</div>
<script type="text/javascript">
Vue.component('component-a', {
template : '<p>Component A<p>'
})
Vue.component('component-b', {
template : '<p>Component B<p>'
})
Vue.component('component-c', {
template : '<p>Component C<p>'
})
new Vue({
el: '#app1',
})
new Vue({
el: '#app2',
})
</script>
</body>
</html>
Hasil
<!DOCTYPE html>
<html>
<head>
<title>Local Component</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
<script type="text/javascript">
var ComponentA = {
template : '<p>Component A<p>'
}
var ComponentB = {
template : '<p>Component B<p>'
}
var ComponentC = {
template : '<p>Component C<p>'
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC
}
})
</script>
</body>
</html>
Hasil
Perbedaan Global Component dan Local Component
Pada globsal component di buat 2 objek vue. dan component dibuat agar dapat masuk kedalam 2 objek vue yang telah di buat
jika kita menambah objek vue lagi dan memmasukan komponen yang akan di masukan ke objek tersebut maka hal itu akan bisa dilakukan.
sedangkan pada local component, component hanya di buat untuk 1 objek vue saja dengan memasukan componen kedalam objek vue tersebut.
jika ingin membuat objek vue yang berbeda maka harus memasukan kembalik component yang ada kedalam objek vue.
jika kita menambah objek vue lagi dan memmasukan komponen yang akan di masukan ke objek tersebut maka hal itu akan bisa dilakukan.
sedangkan pada local component, component hanya di buat untuk 1 objek vue saja dengan memasukan componen kedalam objek vue tersebut.
jika ingin membuat objek vue yang berbeda maka harus memasukan kembalik component yang ada kedalam objek vue.
C. Mixins
<!DOCTYPE html>
<html>
<head>
<title>Mixins</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
Vue JS
</div>
<script type="text/javascript">
var MixinsNama = {
created: function() {
this.nama()
},
methods: {
nama: function() {
console.log('Mixin Nama Nashrul Ahsanu Nadiya')
}
}
}
var vm = new Vue({
el: '#app',
mixins: [
MixinsNama
]
})
</script>
</body>
</html>
Hasil
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.
Ketika mixin dan komponen berisi opsi yang saling tumpang tindih, maka mereka berdua akan digabungkan menggunakan strategi yang tepat.
Sebagai contoh, data object mengalami penggabungan rekursif, maka data pada komponen yang akan diterapkan karena memiliki prioritas yang lebih utama ketika terjadi nya konflik.
Hook functions dengan nama yang sama akan digabungkan kedalam array, sehingga semua nya bisa dipanggil. Mixin hook akan dipanggil terlebih dahulu sebelum hook milik komponen itu sendiri.
Ketika mixin dan komponen berisi opsi yang saling tumpang tindih, maka mereka berdua akan digabungkan menggunakan strategi yang tepat.
Sebagai contoh, data object mengalami penggabungan rekursif, maka data pada komponen yang akan diterapkan karena memiliki prioritas yang lebih utama ketika terjadi nya konflik.
Hook functions dengan nama yang sama akan digabungkan kedalam array, sehingga semua nya bisa dipanggil. Mixin hook akan dipanggil terlebih dahulu sebelum hook milik komponen itu sendiri.
Komentar
Posting Komentar