Unter welchen Umständen ist die Renderfunktion in Vue für den Einsatz geeignet?

In diesem Artikel geht es darum, unter welchen Umständen die Renderfunktion in Vue für den Einsatz geeignet ist? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Renderfunktion

vue erstellt Ihr HTML anhand einer Vorlage. In besonderen Fällen kann dieses fest codierte Modell die Anforderungen jedoch nicht erfüllen und es müssen JS-Programmierfunktionen erforderlich sein. An diesem Punkt müssen Sie Render verwenden, um HTML zu erstellen.

Wann ist es angebracht, die Renderfunktion zu verwenden?

Beim gleichzeitigen Kapseln einer Reihe gemeinsamer Schaltflächenkomponenten verfügt die Schaltfläche über vier Stile (Erfolg). , Fehler, Warnung, Standard). Zunächst fällt Ihnen vielleicht die folgende Implementierung von

  <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>

ein, die völlig in Ordnung ist, wenn nur wenige Schaltflächenstile vorhanden sind. Stellen Sie sich jedoch vor, dass mehr als zehn Schaltflächenstile erforderlich sind. Dann scheint die hartcodierte Vorlagenmethode sehr schwach zu sein. In solchen Situationen kann man sagen, dass die Verwendung der Renderfunktion die beste Wahl ist.

Schreiben Sie die Schaltflächenkomponente entsprechend der tatsächlichen Situation neu

Zunächst entspricht der von der Renderfunktion generierte Inhalt dem Inhalt der Vorlage Wenn Sie die Renderfunktion verwenden, müssen Sie sie zunächst in die .vue-Datei einfügen. Entfernen Sie das Vorlagen-Tag. Es bleibt nur die logische Ebene übrig.

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');
    }
  }
};

Nach dem komponentenbasierten Denken sind Dinge, die abstrahiert werden können, niemals fest in der Logik codiert. Die ClickHandle-Funktion hier kann je nach Schaltflächentyp unterschiedliche Logik auslösen, daher werde ich nicht auf Details eingehen.

Dann rufen Sie

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

in der übergeordneten Komponente mit jsx auf.

Ja, merken Sie sich die gleiche Art der Verwendung jedes Parameters und übergeben Sie die Parameter der Reihe nach Es ist wirklich zu viel Mühe. Dann können Sie jsx tatsächlich verwenden, um diesen langwierigen Prozess zu optimieren.

  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>
    );
  },

Das obige ist der detaillierte Inhalt vonUnter welchen Umständen ist die Renderfunktion in Vue für den Einsatz geeignet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!