Eine sehr detaillierte Erklärung des Einweg-Datenflusses von vue-Eltern-Kind-Komponenten, die Werte übergeben (1)

Es gibt eine DialogInfo-Komponente: Die übergeordnete Komponente übergibt den Wert an die sichtbare

untergeordnete Komponente und klickt, um den Wert von dialogTableVisible hinzuzufügen: In

diesem Fall wird zur Laufzeit ein Fehler gemeldet:

Lösung:

<template>
  <el-dialog title="收货地址" :visible.sync="visible_flag" v-on:close="handleClose" :modal-append-to-body="false">
    <el-table>
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
    
    
  name: "DialogInfo",
  props: {
    
    
    visible: Boolean
  },
  watch: {
    
    
    visible: {
    
    
      handler(newValue, oldValue){
    
    
        this.visible_flag = newValue
        console.log(`old value ${
      
      oldValue} --------> new value ${
      
      newValue}`);
      }
    }
  },
  methods: {
    
    
    handleClose() {
    
    
      this.$emit("changeStatusHide", false)
    }
  },
  data() {
    
    
    return {
    
    
      visible_flag: false
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

1. Deklarieren Sie eine eigene Variable in den Daten visible_flagder untergeordneten Komponente . Der Standardwert ist der von der übergeordneten Komponente übergebene Standardwert.
2. visible_flagBinden Sie gleichzeitig an das el-dialogLabel:

3. watchÜberwachen Sie den von der übergeordneten Komponente übergebenen Wert visibleund Aufrufen der handlerMethode zum Abhören des übergeordneten Elements Die neuen und alten Werte der Komponente und Ändern des Attributwerts, um visible_flagmit dem von der übergeordneten Komponente übergebenen neuen Wert newValuesynchron zu bleiben:

Sortieren Sie ihn aus: den
Standardparameter Von der übergeordneten Komponente an die untergeordnete Komponente übergeben ist falsch:

Sobald auf die neue Schaltfläche geklickt wird, wird

dialogTableVisibleder Wert in geändert. Die wahre
untergeordnete Komponente visibleempfängt die von der übergeordneten Komponente übergebenen Parameter, und die Überwachung visible

ergab, dass das von der übergeordneten Komponente übergebene Sichtbare vorhanden ist wurde von false in true geändert, sodass der Handler ausgelöst wird und der eigene sichtbare_flag-Wert der untergeordneten Komponente in den neuen Wert true geändert wird. Das Dialogfeld wird also angezeigt.

Nach dem Klicken auf "Dialog schließen" können Sie dies jedoch nicht tun , unabhängig davon, wie Sie auf die Schaltfläche klicken Tauschen Sie den Dialog aus, denn wenn Sie darauf klicken, wiederholen Sie nur die Einstellungen:

Damit die Unterkomponenten die eingehenden Parameteränderungen nicht überwachen können und keine Reaktion ausführen

Schließlich müssen wir dafür sorgen, dass jedes untergeordnete Element die übergeordnete Komponentenbaugruppe nach Wert über abhört und später sein sichtbares_Flag ändert. Warten Sie, bis der Benutzer den Dialog schließt (der Dialog wird ausgelöst close事件), und teilen Sie der übergeordneten Komponente mit, hey man, you sollte setzen dialogTableVisibleDer Wert wird wieder auf false geändert!

Da die untergeordnete Komponente den Wert der übergeordneten Komponente nicht ändern kann (Einweg-Datenflussbeschränkung), kann $emitdie untergeordnete Komponente die übergeordnete Komponente nur anweisen, den Wert durch Ausgeben eines Ereignisses zu ändern:

Klicken Sie auf den Dialog schließen Ereignis zu schließen , wird ausgelöst, wenn die Callback - Funktion handleClose:

in handleCloseder Baugruppe die übergeordnete Komponente sagen: Hey, komm, können Sie tun , um dies changeStatusHide? Ding , und ich werde Sie einen Wert geben false

hier übergeordnete Komponente, auf die Unter hören -assemblies, die über ihr eigenes ausgegeben werden sollen Ein Ereignis changeStatusHide:

Rufen Sie dann die Rückruffunktion change () auf und verwenden Sie den von der untergeordneten Komponente übergebenen Wert false, um den Wert ihres eigenen Attributs dialogTableVisible auf false zu setzen:

Auf diese Weise kann sichergestellt werden, dass die untergeordnete Komponente beim nächsten Klicken auf die Schaltfläche den von der übergeordneten Komponente übergebenen Parameter überwacht, um ihn zu ändern: von false-> true