VueJS - Fungsi Render
Kami telah melihat komponen dan kegunaannya. Misalnya, kami memiliki konten yang perlu digunakan kembali di seluruh proyek. Kita dapat mengonversi yang sama sebagai komponen dan menggunakannya.
Mari kita lihat contoh komponen sederhana dan lihat apa yang harus dilakukan fungsi render di dalamnya.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>Pertimbangkan contoh di atas dari komponen sederhana yang mencetak Hello World seperti yang ditunjukkan pada tangkapan layar berikut.
Sekarang, jika kita ingin menggunakan kembali komponen tersebut, kita dapat melakukannya hanya dengan mencetaknya lagi. Sebagai contoh,
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>Dan hasilnya adalah sebagai berikut.
Namun, sekarang kami membutuhkan beberapa perubahan pada komponen tersebut. Kami tidak ingin teks yang sama dicetak. Bagaimana kita bisa mengubahnya? Jika, kami mengetik sesuatu di dalam komponen, apakah itu akan dipertimbangkan?
Mari kita perhatikan contoh berikut dan lihat apa yang terjadi.
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>Outputnya tetap sama seperti yang kita lihat sebelumnya. Itu tidak mengubah teks seperti yang kita inginkan.
Komponen menyediakan sesuatu yang disebut sebagai slots. Mari kita manfaatkan dan lihat apakah kita mendapatkan hasil yang diinginkan.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>Seperti yang terlihat pada kode di atas, di template kami telah menambahkan slot, maka sekarang dibutuhkan nilai untuk dikirim ke dalam komponen seperti yang ditunjukkan pada tangkapan layar berikut.
Sekarang, mari kita anggap kita ingin mengubah warna dan ukurannya. Misalnya, saat ini kami menggunakan tag h1 dan kami ingin mengubah tag HTML menjadi tag p atau tag div untuk komponen yang sama. Bagaimana kita bisa memiliki fleksibilitas untuk melakukan begitu banyak perubahan?
Kita bisa melakukannya dengan bantuan fungsi render. Fungsi Render membantu membuat komponen dinamis dan menggunakan cara yang diperlukan dengan menjaganya tetap umum dan membantu menyampaikan argumen menggunakan komponen yang sama.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>Pada kode di atas, kami telah mengubah komponen dan menambahkan fungsi render dengan properti props menggunakan potongan kode berikut.
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});Alat peraga terlihat seperti berikut.
props:{
elementtype:{
attributes:String,
required:true
}
}Kami telah mendefinisikan properti yang disebut tipe elemen, yang mengambil atribut bidang tipe string. Bidang lain yang wajib diisi, yang menyebutkan bahwa bidang tersebut wajib.
Dalam fungsi render, kami telah menggunakan properti elementtype seperti yang terlihat pada bagian kode berikut.
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}Fungsi Render mengambil createElement sebagai argumen dan mengembalikannya sama. CreateElement membuat elemen DOM dengan cara yang sama seperti di JavaScript. Kami juga telah membagi jenis elemen dengan koma, menggunakan nilai di bidang attrs.
CreateElement mengambil param pertama sebagai elementtag yang akan dibuat. Itu diteruskan ke komponen menggunakan potongan kode berikut.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Komponen perlu mengambil bidang alat peraga seperti yang ditunjukkan di atas. Ini dimulai dengan: dan nama alat peraga. Di sini, kami meneruskan tag elemen, warna, ukuran font, dan id elemen.
Dalam fungsi render, di createElement, kita membagi koma, jadi elemen pertama adalah elementtag, yang diberikan ke createElemet seperti yang ditunjukkan pada bagian kode berikut.
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)a[0]adalah tag elemen html. Parameter selanjutnya adalah atribut untuk tag elemen. Mereka didefinisikan di bidang attr di bagian kode berikut.
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}Kami telah mendefinisikan dua atribut untuk tag elemen - id dan style. Ke id, kita mengirimkan [3], yang merupakan nilai yang kita miliki setelah membagi koma. Dengan menggunakan gaya, kami telah menentukan warna dan ukuran font.
Terakhir adalah slot, yaitu pesan yang telah kita berikan pada komponen di bagian kode berikut.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Kami telah menentukan teks yang akan dicetak di createElement menggunakan potongan kode berikut.
this.$slots.defaultDibutuhkan default yang ditetapkan di bidang komponen.
Berikut adalah output yang kita dapatkan di browser.
Unsur-unsur tersebut juga menunjukkan strukturnya. Ini adalah komponen yang telah kami tentukan -
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>