Beispielcode einer benutzerdefinierten Vue-Komponente zur Implementierung bidirektionaler V-Model-Bindungsdaten

Im Projekt werden Sie auf benutzerdefinierte öffentliche Komponenten stoßen, die das Projekt aufrufen kann. Normalerweise können Sie Props verwenden, um Parameter zu definieren, die die von der übergeordneten Komponente übergebenen Parameter empfangen und dann über die Methode $emits() der untergeordneten Komponente Daten an die übergeordnete Komponente zurückgeben.

Ähnlich wie das Folgende:

Übergeordnete Komponente

<common-checkbox :checked="WarenAusgewählt" Klasse="links" :height="'16px'" :width="'16px'" @checkChange="checkChange"></common-checkbox>

     /**
     * Unterkomponenten-Feedback zur Verarbeitung erhalten */
    checkChange(Wert) {
      this.goodsSelected=value //Unterkomponentendaten der übergeordneten Komponente zuweisen}

Unterkomponenten

    /**
     * Ausgewähltes Postback umschalten */
    UmschaltenCheck(Wert) {
      this.$emit('changeCheck', value)//Return-Methode, gibt die geänderten Daten der untergeordneten Komponente zur Verarbeitung an die übergeordnete Komponente zurück}

Diese Schreibweise erfordert jedoch das Schreiben zusätzlicher Verarbeitungsmethoden auf der Seite, die die öffentliche Komponente aufruft, und scheint zu niedrig zu sein. Können wir eine direkte bidirektionale Bindung des V-Modells deklarieren, wie die öffentlichen Komponenten, die mit dem Framework geliefert werden? Als Nächstes stellen wir eine Lösung für diese Situation bereit, die im Projekt tatsächlich auftritt.

Erster Weg:

Wenn Sie das V-Model-Attribut normalerweise an eine untergeordnete Komponente in der übergeordneten Komponente binden, verwendet die untergeordnete Komponente standardmäßig die an das V-Model gebundenen Daten und weist sie dem Props-Attribut mit dem Namen „Wert“ der untergeordneten Komponente zu. Der Wert muss noch im Voraus in den Props der untergeordneten Komponente deklariert werden, sonst wird er nicht empfangen.

Wenn der Wert geändert wird, wird er nicht sofort in beide Richtungen an die übergeordnete Komponente zurückgegeben. Wenn Sie das V-Modell der übergeordneten Komponente zurückgeben und synchron aktualisieren möchten, müssen Sie Folgendes tun

 dies.$emit('Eingabe', Wert) 

Wenn das Ereignis der bidirektionalen Bindungsrückgabe nicht deklariert ist, wird es standardmäßig durch das Eingabeereignis zurückgegeben. Warum heißt es „wenn das Ereignis der bidirektionalen Bindungsrückgabe nicht deklariert ist“? Dies ist die zweite Möglichkeit, die weiter unten erläutert wird.

Einfach ausgedrückt besteht die erste Möglichkeit, dies zu implementieren darin, zuerst die Daten der übergeordneten Komponente an das V-Modell zu binden, dann automatisch die Props-Eigenschaft des Werts der untergeordneten Komponente abzurufen und schließlich this.$emit('input', value) aufzurufen, um sie bei einer Änderung der Daten an die übergeordnete Komponente zurückzugeben. Auf diese Weise kann die übergeordnete Komponente eine bidirektionale Bindung erreichen, ohne zusätzlich die Rückgabe der untergeordneten Komponente zu implementieren.

Zweiter Weg:

Es wurde bereits erwähnt, dass „wenn kein bidirektionales Bindungsrückrufereignis deklariert ist“, standardmäßig ein Eingaberückruf verwendet wird. Wenn ja, dann existiert er. Was passiert, wenn ich keine Eingabe verwende? Dazu ist es notwendig, eine spezielle Eigenschaft von Vue zu verstehen: model. Mit dieser Eigenschaft kann deklariert werden, welches Feld die untergeordnete Komponente zum Empfangen der bidirektional gebundenen Daten verwendet und welcher Methodenrückruf zum Aktualisieren der Daten der übergeordneten Komponente v-model verwendet werden soll. Die Schreibmethode lautet wie folgt:

Standard exportieren {
  Name: 'CommonCkeckBox',
  Modell: {
    Requisite: "geprüft",
    Ereignis: „changeCheck“
  },
    Requisiten: {
    geprüft:
      Typ: Boolean,
      Standard: false,
    }, // Ausgewählter Status}
  }

Diese Schreibweise bedeutet, dass die bidirektionalen Bindungsdaten der übergeordneten Komponente an die Props-Eigenschaft mit dem Namen „checked“ der untergeordneten Komponente gebunden werden, und wenn die untergeordnete Komponente this.$emit('changeCheck', value) aufruft, werden die Daten der übergeordneten Komponente synchron aktualisiert, um eine bidirektionale Bindung zu erreichen.

Nachfolgend sehen Sie einen benutzerdefinierten Kontrollkästchencode als Referenz:

<Vorlage>
<div Klasse = "Checkbox-Container" @click = "toggleCheck()" :style = "{width:width,height:height}">
        <div Klasse="Kontrollkästchen-Symbol">
              <!-- Drei Zustände: ausgewählt, nicht ausgewählt, deaktiviert -->
              <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="Breite" :height="Höhe" key="Auswählen" v-if="checked&&!disabled"/>
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" key="nicht ausgewählt" v-if="!checked&&!disabled" />
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="Breite" :height="Höhe" class="disabled" key="unselected" v-if="disabled"/>
            </div>
        <Steckplatz></Steckplatz>
</div>
</Vorlage>
<Skript>
/**
 * Globales einheitliches Popup-Fenster */
Standard exportieren {
  Name: 'CommonCkeckBox',
  Modell: {
    Requisite: "geprüft",
    Ereignis: „changeCheck“
  },
  Requisiten: {
    geprüft:
      Typ: Boolean,
      Standard: false,
    }, // ausgewählter Status deaktiviert: {
      Typ: Boolean,
      Standard: false,
    }, // Ob die Breite deaktiviert werden soll: {
      Typ: Zeichenfolge,
      Standard: '16px',
    }, //Standardbreite und -höhe der Schaltfläche: {
      Typ: Zeichenfolge,
      Standard: '16px',
    }, //Standardhöhe der Schaltfläche},
  erstellt() {
  },
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    /**
     * Ausgewähltes Postback umschalten */
    UmschaltenCheck() {
      dies.$emit('changeCheck', !this.checked)
      dies.$emit('toggleCheck')
    }
  },
  betrachten:
    geprüft:
      handler(neuerWert, alterWert) {
      //Statusänderungsereignis öffnen this.$emit('onChange')
      },
      tief: wahr
    }
  },
}
</Skript>
<style lang="scss" scoped>
.Kontrollkästchen-Container{
    Anzeige: Inline-Block;
    .Kontrollkästchen-Symbol{
        img{
          transformieren: übersetzenZ(0);
          wird sich ändern: automatisch;
        }
        .deaktiviert{
          Hintergrundfarbe: #f5f5f5;
          Randradius: 50 %;
        }
    }
}
</Stil>

Übergeordnete Komponente:

      <common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'" :height="'16px'"></common-checkbox>

Welche Methode Sie verwenden, hängt vom jeweiligen Projektszenario ab. Wenn die erste Methode die Anforderungen nicht erfüllt, können Sie die zweite Methode ausprobieren.

Zusammenfassen

Dies ist das Ende dieses Artikels über benutzerdefinierte Vue-Komponenten zur Implementierung von bidirektionalen V-Model-Bindungsdaten. Weitere relevante Inhalte zu bidirektionalen Vue-V-Model-Bindungsdaten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!