Verschiedene Implementierungsmethoden von Vue zum Ändern von übergeordneten Komponenteneigenschaften durch untergeordnete Komponenten

<Vorlage>
  <div style="Hintergrundfarbe: himmelblau;">
    <h3>Ändern Sie die Eigenschaft, indem Sie auf die Ereignisse der untergeordneten Komponente durch die übergeordnete Komponente hören.</h3>
    <div>übergeordnetes Objekt:{{ obj }}</div>
    <div>übergeordnete Nachricht:{{ msg }}</div>
    <!-- Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, überwacht sie das von der untergeordneten Komponente ausgelöste Emit-Ereignis über „on“, um den Wert zu empfangen und den Benutzer zu aktualisieren-->
    <emitKind
      :obj="obj"
      :msg="Nachricht"
      @update-obj="AktualisierungsObj"
      @update-msg="Aktualisierungsnachricht"
    />
  </div>
</Vorlage>

<Skript>
importiere emitChild aus './components/emitChild'

Standard exportieren {
  Name: "emitUpdate",
  Komponenten:
    emittieren
  },
  Daten () {
    zurückkehren {
      Objekt: {
        Name: 'zhangsan',
        Alter: 18
      },
      Nachricht: 'Hallo'
    }
  },
  Methoden: {
    // Auf Ereignisse achten, die von untergeordneten Komponenten ausgelöst werden, und Objekt in Daten aktualisieren
    updateObj (Schlüssel, neuerWert) {
      this.obj[Schlüssel] = neuerWert
    },
    // Auf Ereignisse achten, die von untergeordneten Komponenten ausgelöst werden, und Nachrichten in den Daten aktualisieren
    updateMsg (neuerWert) {
      this.msg = neuerWert
    }
  }
}
</Skript>

<Vorlage>
  <div Stil="Hintergrundfarbe: pink;">
    <div>
      <span>Namen ändern:</span>
      <!-- Hier ist der Bindungswert ein Wert, da die Eingabe hauptsächlich zum Anzeigen von Prop-Daten verwendet wird und die eigentliche Änderung nicht in der Unterkomponente erfolgt. Die Unterkomponente wird nur als Änderungsauslöserquelle verwendet-->
      <!-- Eingabeereignis als Eintrittspunkt der Triggerquelle binden -->
      <Eingabetyp="Text" :Wert="Objekt.Name" @Eingabe="UpdateObj($Event, 'Name')">
    </div>
    <div>
      <span>Alter ändern:</span>
      <input type="text" :value="obj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>Nachricht ändern:</span>
      <Eingabetyp="Text" :Wert="Nachricht" @Eingabe="UpdateNachricht($Event.Ziel.Wert)">
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "emitUpdateChild",
  Requisiten: {
    Objekt: {
      Typ: Objekt,
      Standard: () => {}
    },
    Nachricht: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  Methoden: {
    // Benachrichtigen Sie die übergeordnete Komponente, um das Objekt zu aktualisieren
    updateObj ($Ereignis, Schlüssel) {
      // Empfange den Eingabewert und das entsprechende Attribut in obj, das aktualisiert werden muss, und gib es dann an die übergeordnete Komponente zurück. // Die übergeordnete Komponente kann erkennen, welchen Attributwert in obj die untergeordnete Komponente aktualisieren muss. $emit('update-obj', key, $event.target.value)
    },
    // Benachrichtigen Sie die übergeordnete Komponente, um die Nachricht zu aktualisieren
    updateMsg (neuerWert) {
      dies.$emit('update-msg', neuerWert)
    }
  }
}
</Skript>

<Vorlage>
  <div style="Hintergrundfarbe: himmelblau;">
    <h3>Eigenschaft ändern durch Synchronisierungsmodifikator der übergeordneten Komponente + Emission-Ereignis der untergeordneten Komponente</h3>
    <div>übergeordnetes Objekt:{{ obj }}</div>
    <div>übergeordnete Nachricht:{{ msg }}</div>
    <!-- Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, um Eigenschaften zu übergeben, fügen Sie nach der Eigenschaft einfach .sync hinzu -->
    <syncChild :obj.sync="obj" :msg.sync="msg" />
    <!--
      sync ist eigentlich gleichbedeutend mit der Ausführung des durch @listener ausgelösten Ereignisnamens = "Eigenschaftsname in übergeordneten Daten = von emit übergebener Wert (d. h. $event)"
      Dieser Codeabschnitt -->
    <!-- Die Wirkung entspricht dem folgenden Code, es ist also nicht erforderlich, Methoden zum Ändern von Daten in den Methoden der übergeordneten Komponente zu definieren-->
    <!--
      <syncChild
        :obj="obj"
        :msg="Nachricht"
        @update-obj="obj = $Ereignis"
        @update-msg="msg = $Ereignis"
      />
    -->
  </div>
</Vorlage>

<Skript>
importiere syncChild aus „./components/syncChild“

Standard exportieren {
  Name: "syncUpdate",
  Komponenten:
    synchronisierenUntergeordnetes
  },
  Daten () {
    zurückkehren {
      Objekt: {
        Name: 'zhangsan',
        Alter: 18
      },
      Nachricht: 'Hallo'
    }
  }
}
</Skript>

<Vorlage>
  <div Stil="Hintergrundfarbe: pink;">
    <div>
      <span>Namen ändern:</span>
      <!-- Hier ist der Bindungswert ein Wert, da die Eingabe hauptsächlich zum Anzeigen von Prop-Daten verwendet wird und die eigentliche Änderung nicht in der Unterkomponente erfolgt. Die Unterkomponente wird nur als Änderungsauslöserquelle verwendet-->
      <!-- Eingabeereignis als Eintrittspunkt der Triggerquelle binden -->
      <Eingabetyp="Text" :Wert="Unterobjekt.Name" @Eingabe="UpdateObj($Event, 'Name')">
    </div>
    <div>
      <span>Alter ändern:</span>
      <input Typ="Text" :Wert="KindObj.Alter" @input="UpdateObj($Event, 'Alter')">
    </div>
    <div>
      <span>Nachricht ändern:</span>
      <Eingabetyp="Text" :Wert="Nachricht" @Eingabe="UpdateNachricht($Event.Ziel.Wert)">
    </div>
  </div>
</Vorlage>

<Skript>
// Hier stellen wir die Deep-Copy-Methode cloneDeep der Lodash-Toolbibliothek vor // Offizielle Dokumentadresse https://www.lodashjs.com/
importiere { cloneDeep } von 'lodash'

Standard exportieren {
  Name: "emitUpdateChild",
  Requisiten: {
    Objekt: {
      Typ: Objekt,
      Standard: () => {}
    },
    Nachricht: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  Daten () {
    zurückkehren {
      // Hier wird das Objekt der Requisite per Deep Copy kopiert, hauptsächlich für:
      // 1. Unterscheide zwei Objekte (Referenztypen) anhand unterschiedlicher Speicheradressen // 2. Behalte alle Werte im Objekt, um das Rendern/Ändern/Zurückgeben von untergeordneten Komponenten zu erleichtern childObj: cloneDeep(this.obj)
    }
  },
  Methoden: {
    // Benachrichtigen Sie die übergeordnete Komponente, um das Objekt zu aktualisieren
    updateObj ($Ereignis, Schlüssel) {
      // Erhalte den Eingabewert und das entsprechende Attribut in childObj, das aktualisiert werden muss // Aktualisiere dann childOBj und gib es an die übergeordnete Komponente zurück // Die übergeordnete Komponente kann das erhaltene childObj direkt in das Datenobjekt this.childObj[key] = $event.target.value aktualisieren
      dies.$emit('update:obj', dies.childObj)
    },
    // Benachrichtigen Sie die übergeordnete Komponente, um die Nachricht zu aktualisieren
    updateMsg (neuerWert) {
      dies.$emit('update:msg', neuerWert)
    }
  }
}
</Skript>

<Vorlage>
  <div style="Hintergrundfarbe: himmelblau;">
    <h3>Ändern Sie die Eigenschaft, indem Sie sie den Daten zuweisen</h3>
    <div>übergeordnetes Objekt:{{ obj }}</div>
    <div>übergeordnete Nachricht:{{ msg }}</div>
    <dataChild :obj="obj" :msg.sync="msg" />
  </div>
</Vorlage>

<Skript>
importiere dataChild aus „./components/dataChild“

Standard exportieren {
  Name: "dataUpdate",
  Komponenten:
    Datenuntergeordnetes Datenelement
  },
  Daten () {
    zurückkehren {
      Objekt: {
        Name: 'zhangsan',
        Alter: 18
      },
      Nachricht: 'Hallo'
    }
  }
}
</Skript>

<Vorlage>
  <div Stil="Hintergrundfarbe: pink;">
    <div>
      <span>Namen ändern:</span>
      <!-- Da wir hier die Eigenschaft direkt den Daten zuweisen, können wir die bidirektionale Bindung des V-Modells direkt zum Ändern der Daten verwenden-->
      <Eingabetyp="Text" v-Modell="Datenobjekt.Name">
    </div>
    <div>
      <span>Alter ändern:</span>
      <Eingabetyp="Text" v-Modell="DatenObj.Alter">
    </div>
    <div>
      <span>Nachricht ändern:</span>
      <!-- Hier ist eine weitere Möglichkeit, grundlegende Datentypen zu ändern, die durch Watch-Listener implementiert werden kann-->
      <Eingabetyp="Text" v-Modell="Datennachricht">
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "dataChild",
  Requisiten: {
    Objekt: {
      Typ: Objekt,
      Standard: () => {}
    },
    Nachricht: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  Daten () {
    zurückkehren {
      // Wenn der Referenzdatentyp direkt zugewiesen wird, handelt es sich um eine oberflächliche Kopie. Nur die Speicheradresse wird kopiert. Wenn Sie eine ändern, wirkt sich dies auf das andere Datenobjekt aus: this.obj.
      // Wenn grundlegende Datentypen direkt zugewiesen werden, werden die Werte kopiert und das Ändern eines Werts wirkt sich nicht auf den anderen aus dataMsg: this.msg
    }
  },
  betrachten:
    // Hier hören wir die aus den Daten kopierte dataMsg ab und führen bei einer Änderung „emitt“ aus, um die übergeordnete Komponente zu benachrichtigen, dass dataMsg (newVal) aktualisiert werden soll {
      dies.$emit('update:msg', neuerWert)
    }
  }
}
</Skript>

<Vorlage>
  <div style="Hintergrundfarbe: himmelblau;">
    <h3>Eigenschaften durch rechnergestützte Eigenschaftsüberwachung ändern</h3>
    <div>übergeordnetes Objekt:{{ obj }}</div>
    <div>übergeordnete Nachricht:{{ msg }}</div>
    <computedChild :obj="obj" :msg.sync="msg" />
  </div>
</Vorlage>

<Skript>
importiere computedChild aus './components/computedChild'

Standard exportieren {
  Name: "berechnetesUpdate",
  Komponenten:
    berechnetes Kind
  },
  Daten () {
    zurückkehren {
      Objekt: {
        Name: 'zhangsan',
        Alter: 18
      },
      Nachricht: 'Hallo'
    }
  }
}
</Skript>

<Vorlage>
  <div Stil="Hintergrundfarbe: pink;">
    <div>
      <span>Namen ändern:</span>
      <!-- Da wir hier direkt über die berechnete Eigenschaft auf die Eigenschaft hören, können wir die bidirektionale Bindung des V-Modells direkt verwenden, um die Daten zu ändern-->
      <Eingabetyp="Text" v-Modell="berechnetesObjekt.name">
    </div>
    <div>
      <span>Alter ändern:</span>
      <Eingabetyp="Text" v-Modell="berechnetesObj.Alter">
    </div>
    <div>
      <span>Nachricht ändern:</span>
      <!-- Hier ist eine weitere Möglichkeit, grundlegende Datentypen zu ändern, die über den Setter der berechneten Eigenschaft erreicht werden kann-->
      <Eingabetyp="Text" v-Modell="berechneteMsg">
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "berechnetesKind",
  Requisiten: {
    Objekt: {
      Typ: Objekt,
      Standard: () => {}
    },
    Nachricht: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  },
  berechnet: {
    berechnetesObjekt() {
      // Hier wird der Referenzdatentyp obj direkt zurückgegeben. Zu diesem Zeitpunkt entspricht computedObj obj
      // Es handelt sich also um eine oberflächliche Kopie, nur die Speicheradresse wird kopiert und das Ändern einer Adresse wirkt sich auf die andere aus. returniere this.obj
    },
    berechneteMsg: {
      erhalten () {
        // Bei jeder Aktualisierung der Eigenschaft wird die Getter-Methode der berechneten Eigenschaft ausgelöst, um den neuesten Wert abzurufen. // Bei der direkten Rückgabe des Basisdatentyps wird der Wert kopiert. Eine Änderung des einen wirkt sich nicht auf den anderen aus. return this.msg
      },
      setze (neuerWert) {
        // Hier verwenden wir die Setter-Methode der berechneten Eigenschaft, um die Emission auszulösen, wenn der Wert geändert wird, um die übergeordnete Komponente zu benachrichtigen, dass der Wert aktualisiert werden soll. this.$emit('update:msg', newVal)
      }
    }
  }
}
</Skript>