Maison > Article > interface Web > Utilisation de base de la fonction de rendu dans Vue (tutoriel détaillé)

Utilisation de base de la fonction de rendu dans Vue (tutoriel détaillé)

亚连original: 2018-06-08 16:03:1112914parcourir

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 === &#39;success&#39;">success</p>
 <p v-else-if="type === &#39;error&#39;">error</p>
 <p v-else-if="type === &#39;warm&#39;">warm</p>
 <p v-else>default</p>

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(&#39;p&#39;,{
   &#39;class&#39;: {
    btn: true,
    success: this.type === &#39;success&#39;,
    error: this.type === &#39;error&#39;,
    warm: this.type === &#39;warm&#39;,
    default: this.type === &#39;default&#39;
   },
   domProps: {
    innerHTML: this.$slots.default[0].text
   },
   on: {
    click: this.clickHandle
   }
  })
 },
 methods: {
  clickHandle() {
   // dosomething
  }
 },
 props: {
  type: {
   type: String,
   default: &#39;default&#39;
  },
  text: {
   type: String,
   default: &#39;default&#39;
  }
 }
};

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>

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 === &#39;success&#39;,
   error: this.type === &#39;error&#39;,
   warm: this.type === &#39;warm&#39;,
   default: this.type === &#39;default&#39;
  }}
  onClick={this.clickHandle}>
  {this.$slots.default[0].text}
 </p>
)

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(&#39;mycomment&#39;,{ 
      template:&#39;#is&#39;, 
      props:{ 
        level:{ 
          type:Number, 
          required:true, 
        } 
      } 
    }) 
    var app =new Vue({ 
      el:&#39;#app&#39;, 
    }) 
   </script>

À 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(&#39;render-teample&#39;,{ 
  render:function(createElement){ 
    return createElement( 
      &#39;h&#39;+this.level, 
      this.$slots.default 
      ) 
  }, 
   props: { 
  level: { 
   type: Number, 
   required: true 
  } 
} 
  var app=new Vue({ 
    el:"#app", 
 
  }); 
 </script>

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(&#39;render-teample&#39;,{ 
    render:function(createElement){ 
      return createElement( 
        &#39;h&#39;+this.level, 
        { 
          &#39;class&#39;:{ 
            show:true, 
            hide:false, 
          }, 
          style:{ 
            width:&#39;200px&#39;, 
            height:&#39;400px&#39;, 
            background:&#39;red&#39;, 
          }, 
          attrs:{ 
            name:&#39;h-ex&#39;, 
            id:&#39;h-id&#39; 
          }, 
          props:{ 
            myprops:true, 
          }, 
           on: { 
          click: function(event){ 
            alert(this.num) 
          } 
        }, 
          nativeOn:{ 
            click:function(event) { 
 
              alert(1111) 
            } 
          } 
 
        }, 
        [ 
          this.$slots.myslot, 
          createElement(&#39;p&#39;,{ 
             domProps:{ 
            innerHTML:&#39;holle render&#39; 
          } 
          }) 
        ] 
 
        ) 
    }, 
     props: { 
    level: { 
     type: Number, 
     required: true 
    } 
  } 
});  
    var app=new Vue({ 
      el:"#app", 
      data:{ 
        num:110 
      } 
    }); 
  </script>

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(&#39;p&#39;,&#39;item1&#39;);var
com2= createElement(&#39;p&#39;,&#39;item1&#39;);

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 Liés

Voir plus