VueJS - Renderfunktion
Wir haben Komponenten und deren Verwendung gesehen. Zum Beispiel haben wir einen Inhalt, der im gesamten Projekt wiederverwendet werden muss. Wir können dasselbe wie eine Komponente konvertieren und verwenden.
Schauen wir uns ein Beispiel einer einfachen Komponente an und sehen, was die Renderfunktion darin zu tun hat.
Beispiel
<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>Betrachten Sie das obige Beispiel einer einfachen Komponente, die Hello World wie im folgenden Screenshot gezeigt druckt.
Wenn wir die Komponente jetzt wiederverwenden möchten, können wir dies tun, indem wir sie einfach erneut drucken. Zum Beispiel,
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>Und die Ausgabe wird die folgende sein.
Jetzt müssen wir jedoch einige Änderungen an der Komponente vornehmen. Wir möchten nicht, dass derselbe Text gedruckt wird. Wie können wir das ändern? Wenn wir etwas in die Komponente eingeben, wird dies berücksichtigt?
Betrachten wir das folgende Beispiel und sehen, was passiert.
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>Die Ausgabe bleibt die gleiche wie zuvor. Der Text wird nicht wie gewünscht geändert.
Die Komponente bietet etwas, das als bezeichnet wird slots. Lassen Sie uns davon Gebrauch machen und sehen, ob wir die gewünschten Ergebnisse erzielen.
Beispiel
<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>Wie im obigen Code zu sehen ist, haben wir in der Vorlage einen Steckplatz hinzugefügt. Daher wird jetzt der Wert zum Senden innerhalb der Komponente verwendet, wie im folgenden Screenshot gezeigt.
Betrachten wir nun, wir möchten die Farbe und Größe ändern. Derzeit verwenden wir beispielsweise das h1-Tag und möchten das HTML-Tag für dieselbe Komponente in ein p-Tag oder ein div-Tag ändern. Wie können wir die Flexibilität haben, so viele Änderungen vorzunehmen?
Dies können wir mit Hilfe der Renderfunktion tun. Die Renderfunktion hilft dabei, die Komponente dynamisch zu gestalten und die erforderlichen Funktionen zu verwenden, indem sie allgemein gehalten wird und Argumente mit derselben Komponente übergeben werden.
Beispiel
<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>Im obigen Code haben wir die Komponente geändert und die Renderfunktion mit der Eigenschaft "Requisiten" unter Verwendung des folgenden Codeteils hinzugefügt.
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
}
}
});Die Requisiten sehen wie folgt aus.
props:{
elementtype:{
attributes:String,
required:true
}
}Wir haben eine Eigenschaft namens elementtype definiert, die ein Attributfeld vom Typ string verwendet. Ein weiteres Pflichtfeld, in dem erwähnt wird, dass das Feld obligatorisch ist.
In der Renderfunktion haben wir die Eigenschaft elementtype verwendet, wie im folgenden Code dargestellt.
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
)
}Die Renderfunktion verwendet createElement als Argument und gibt dasselbe zurück. CreateElement erstellt das DOM-Element auf dieselbe Weise wie in JavaScript. Wir haben den Elementtyp auch durch Komma aufgeteilt, indem wir die Werte im Feld attrs verwendet haben.
CreateElement verwendet den ersten Parameter als zu erstellenden Elementtag. Es wird mit dem folgenden Code an die Komponente übergeben.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Die Komponente muss das Requisitenfeld wie oben gezeigt aufnehmen. Es beginnt mit: und dem Namen der Requisiten. Hier übergeben wir das Element-Tag, die Farbe, die Schriftgröße und die ID des Elements.
In der Renderfunktion in createElement teilen wir auf Komma, sodass das erste Element der Elementtag ist, der dem createElemet übergeben wird, wie im folgenden Code gezeigt.
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)a[0]ist das HTML-Element-Tag. Der nächste Parameter sind die Attribute für das Element-Tag. Sie werden im Feld attr im folgenden Code definiert.
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}Wir haben zwei Attribute für das Element-Tag definiert - id und style. Als ID übergeben wir eine [3], die der Wert ist, den wir nach dem Teilen durch Komma haben. Mit Stil haben wir Farbe und Schriftgröße definiert.
Der letzte ist der Slot, das ist die Nachricht, die wir in der Komponente im folgenden Code gegeben haben.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Wir haben den Text, der im createElement gedruckt werden soll, mit dem folgenden Code definiert.
this.$slots.defaultEs wird die im Komponentenfeld zugewiesene Standardeinstellung verwendet.
Es folgt die Ausgabe, die wir im Browser erhalten.
Die Elemente zeigen auch die Struktur. Dies sind die Komponenten, die wir definiert haben -
<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>