Dans quelles circonstances la fonction de rendu de Vue peut-elle être utilisée ?

Ce que cet article vous apporte, c'est dans quelles circonstances la fonction de rendu de Vue peut-elle être utilisée ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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 (succès , erreur, avertissement, valeur par défaut). Tout d'abord, vous pouvez penser à implémenter l'implémentation suivante

  <div class="btn btn-success" v-if="type === &#39;success&#39;">{{ text }}</div>
  <div class="btn btn-danger" v-else-if="type === &#39;danger&#39;">{{ text }}</div>
  <div class="btn btn-warning" v-else-if="type === &#39;warning&#39;">{{ text }}</div>

qui est tout à fait correcte lorsqu'il n'y a que quelques styles de boutons, mais imaginez s'il y a plus de dix styles de boutons nécessaires. 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 {
  props: {
    type: {
      type: String,
      default: 'normal'
    },
    text: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    tag() {
      switch (this.type) {
        case 'success':
          return 1;
        case 'danger':
          return 2;
        case 'warning':
          return 3;
        default:
          return 1;
      }
    }
  },
  render(h) {
    return h('p', {
      class: {
        btn: true,
        'btn-success': this.type === 'success',
        'btn-danger': this.type === 'danger',
        'btn-warning': this.type === 'warning'
      },
      domProps: {
        innerText: this.text
      },
      on: {
        click: this.handleClick
      }
    });
  },
  methods: {
    handleClick() {
      console.log('-----------------------');
      console.log('do something');
    }
  }
};

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

<Button type="danger" text="test"></Button>

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.

  render() {
    return (
      <div
        class={{
          btn: true,
          &#39;btn-success&#39;: this.type === &#39;success&#39;,
          &#39;btn-danger&#39;: this.type === &#39;danger&#39;,
          &#39;btn-warning&#39;: this.type === &#39;warning&#39;
        }}
        onClick={this.handleClick}>
        {this.text}
      </div>
    );
  },

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!