VueJS - Fonction de rendu
Nous avons vu les composants et leur utilisation. Par exemple, nous avons un contenu qui doit être réutilisé dans tout le projet. Nous pouvons convertir le même en tant que composant et l'utiliser.
Jetons un coup d'œil à un exemple de composant simple et voyons ce que la fonction de rendu doit faire en son sein.
Exemple
<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>Prenons l'exemple ci-dessus d'un composant simple qui imprime Hello World comme illustré dans la capture d'écran suivante.
Maintenant, si nous voulons réutiliser le composant, nous pouvons le faire simplement en l'imprimant à nouveau. Par exemple,
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>Et la sortie sera la suivante.
Cependant, nous devons maintenant apporter des modifications au composant. Nous ne voulons pas que le même texte soit imprimé. Comment pouvons-nous le changer? Dans le cas où on tape quelque chose à l'intérieur du composant, sera-t-il pris en considération?
Prenons l'exemple suivant et voyons ce qui se passe.
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>La sortie reste la même que celle que nous avions vue précédemment. Cela ne change pas le texte comme nous le voulons.
Le composant fournit quelque chose appelé comme slots. Profitons-en et voyons si nous obtenons les résultats souhaités.
Exemple
<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>Comme on le voit dans le code ci-dessus, dans le modèle, nous avons ajouté un slot, par conséquent, il prend maintenant la valeur à envoyer à l'intérieur du composant comme indiqué dans la capture d'écran suivante.
Maintenant, considérons que nous voulons changer la couleur et la taille. Par exemple, nous utilisons actuellement la balise h1 et nous voulons changer la balise HTML en balise p ou en balise div pour le même composant. Comment pouvons-nous avoir la flexibilité d'effectuer autant de changements?
Nous pouvons le faire à l'aide de la fonction de rendu. La fonction de rendu permet de rendre le composant dynamique et d'utiliser la manière dont il est requis en le gardant commun et en aidant à passer des arguments en utilisant le même composant.
Exemple
<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>Dans le code ci-dessus, nous avons changé le composant et ajouté la fonction de rendu avec la propriété props en utilisant le morceau de code suivant.
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
}
}
});Les accessoires ressemblent à ce qui suit.
props:{
elementtype:{
attributes:String,
required:true
}
}Nous avons défini une propriété appelée elementtype, qui prend des attributs de champ de type string. Un autre champ obligatoire, qui mentionne que le champ est obligatoire.
Dans la fonction de rendu, nous avons utilisé la propriété elementtype comme indiqué dans le morceau de code suivant.
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
)
}La fonction de rendu prend createElement comme argument et renvoie le même. CreateElement crée l'élément DOM de la même manière qu'en JavaScript. Nous avons également divisé le type d'élément par une virgule, en utilisant les valeurs du champ attrs.
CreateElement prend le premier paramètre comme étiquette d'élément à créer. Il est transmis au composant à l'aide du morceau de code suivant.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Le composant doit prendre le champ des accessoires comme indiqué ci-dessus. Cela commence par: et le nom des accessoires. Ici, nous transmettons la balise d'élément, la couleur, la taille de la police et l'id de l'élément.
Dans la fonction de rendu, dans createElement, nous divisons par virgule, donc le premier élément est le elementtag, qui est donné à createElemet comme indiqué dans le morceau de code suivant.
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)a[0]est la balise d'élément html. Le paramètre suivant est les attributs de la balise d'élément. Ils sont définis dans le champ attr dans le morceau de code suivant.
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}Nous avons défini deux attributs pour la balise d'élément - id et style. Pour id, nous passons un [3], qui est la valeur que nous avons après la séparation par virgule. En utilisant le style, nous avons défini la couleur et la taille de la police.
Le dernier est le slot, c'est le message que nous avons donné dans le composant dans le morceau de code suivant.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Nous avons défini le texte à imprimer dans createElement en utilisant le morceau de code suivant.
this.$slots.defaultIl prend la valeur par défaut attribuée dans le champ du composant.
Voici la sortie que nous obtenons dans le navigateur.
Les éléments montrent également la structure. Ce sont les composants que nous avons définis -
<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>