Cet article présente principalement comment utiliser la fonction de rendu dans Vue. Maintenant, je le partage avec vous et vous donne une référence.
fonction de rendu
vue crée votre HTML via un modèle. Cependant, dans des cas particuliers, ce modèle codé en dur ne peut pas répondre aux besoins et des capacités de programmation js doivent être requises. À ce stade, vous devez utiliser render pour créer du HTML.
Quand est-il approprié d'utiliser la fonction de rendu
Dans le processus d'encapsulation d'un ensemble de composants de bouton communs à la fois, le bouton a quatre styles (par défaut erreur de réussite). Tout d'abord, vous pouvez penser à l'implémentation suivante
<p v-if="type === 'success'">success</p>
<p v-else-if="type === 'error'">error</p>
<p v-else-if="type === 'warm'">warm</p>
<p v-else>default</p>
Copier après la connexion
Il n'y a pas de problème lorsqu'il y a peu de styles de boutons. Mais imaginez simplement, si plus de dix styles de boutons sont requis, le texte dans le fichier. Le bouton de réussite sera modifié en fonction de la situation réelle (par exemple, le texte du bouton de réussite peut être OK, BON, etc.). Ensuite, la méthode du modèle codé en dur semble très faible. Dans des situations comme celle-ci, l’utilisation de la fonction de rendu peut être considérée comme le meilleur choix.
Réécrivez le composant bouton en fonction de la situation réelle
Tout d'abord, le contenu généré par la fonction de rendu est équivalent au contenu du modèle donc, quand. en utilisant la fonction de rendu, vous devez d'abord le mettre dans le fichier .vue. Supprimez la balise de modèle. Seule la couche logique demeure.
export default {
render(h) {
return h('p',{
'class': {
btn: true,
success: this.type === 'success',
error: this.type === 'error',
warm: this.type === 'warm',
default: this.type === 'default'
},
domProps: {
innerHTML: this.$slots.default[0].text
},
on: {
click: this.clickHandle
}
})
},
methods: {
clickHandle() {
// dosomething
}
},
props: {
type: {
type: String,
default: 'default'
},
text: {
type: String,
default: 'default'
}
}
};Copier après la connexion
Selon la pensée basée sur les composants, les choses qui peuvent être abstraites ne sont jamais codées en dur dans la logique. La fonction clickHandle ici peut déclencher une logique différente selon le type de bouton, je n'entrerai donc pas dans les détails.
Ensuite, appelez
<btn
v-for="(btn, index) in testData"
:type="btn.type"
:text="btn.text"
:key="index">{{btn.text}}
</btn>Copier après la connexion
dans le composant parent en utilisant jsx
Oui, rappelez-vous la même utilisation de chaque type de paramètre, dans l'ordre Passage des paramètres est vraiment gênant. Ensuite, vous pouvez réellement utiliser jsx pour optimiser ce processus fastidieux.
return (
<p
class={{
btn: true,
success: this.type === 'success',
error: this.type === 'error',
warm: this.type === 'warm',
default: this.type === 'default'
}}
onClick={this.clickHandle}>
{this.$slots.default[0].text}
</p>
)Copier après la connexion
Exemple 2 :
Lorsque vous rencontrez l'écriture de composants similaires, vous devez écrire beaucoup de code long, par souci de simplicité (la paresse rend les gens progrès) D’un certain point de vue, nous devrions trouver un moyen plus approprié d’obtenir cet effet.
<body>
<p id="app">
<mycomment :level="2">
这是h2元素
</mycomment>
</p>
</body>
<script type="text/x-template" id="is">
<p>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-if="level === 2">
<slot></slot>
</h2>
<h3 v-if="level === 3">
<slot></slot>
</h3>
<h4 v-if="level === 4">
<slot></slot>
</h4>
<h5 v-if="level === 5">
<slot></slot>
</h5>
<h6 v-if="level === 6">
<slot></slot>
</h6>
</p>
</script>
<script>
Vue.component('mycomment',{
template:'#is',
props:{
level:{
type:Number,
required:true,
}
}
})
var app =new Vue({
el:'#app',
})
</script>Copier après la connexion
À l'heure actuelle, la fonction Render résout très bien ce problème. Prenons d'abord un exemple simple, qui peut être considéré comme un squelette de base
<body>
<p id="app">
<render-teample :level="4">
render function
</render-teample>
</p>
</body>
<script>
Vue.component('render-teample',{
render:function(createElement){
return createElement(
'h'+this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
var app=new Vue({
el:"#app",
});
</script>Copier après la connexion
Puis donnons plus loin. vos composants Ajoutez les styles dont vous souhaitez exiger les événements et rendez-les chair et sang
<body>
<p id="app">
<render-teample :level="4" >
<p class="jah" slot="myslot">render function</p>
</render-teample>
</p>
</body>
<script>
Vue.component('render-teample',{
render:function(createElement){
return createElement(
'h'+this.level,
{
'class':{
show:true,
hide:false,
},
style:{
width:'200px',
height:'400px',
background:'red',
},
attrs:{
name:'h-ex',
id:'h-id'
},
props:{
myprops:true,
},
on: {
click: function(event){
alert(this.num)
}
},
nativeOn:{
click:function(event) {
alert(1111)
}
}
},
[
this.$slots.myslot,
createElement('p',{
domProps:{
innerHTML:'holle render'
}
})
]
)
},
props: {
level: {
type: Number,
required: true
}
}
});
var app=new Vue({
el:"#app",
data:{
num:110
}
});
</script>Copier après la connexion
Remarque : les VNodes dans le composant de contrainte doivent être uniques.
Il est très pénible d'écrire directement tous les éléments sous un seul createElement() et n'est pas propice à la maintenance.
Donc généralement
var com1= createElement('p','item1');var
com2= createElement('p','item1');
Copier après la connexion
vous pouvez utiliser return createElement('p',[com1,com2])
Cette situation est interdite return createElement('p', [com1,com1])
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Comment implémenter la connexion de recyclage automatique des transactions MySQL dans Node.js
Comment supprimer un certain objet dans un Élément de tableau JS
Présente en détail les points de connaissance sur les promesses en js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
