Detaillierte Erklärung der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue3

<!-- Übergeordnete Komponente -->
<Vorlage>
  <div>
    <Kinder :title="Titel" @getChildren="getChildren"></Kinder>
    <div>Unterkomponente sagt: {{ childrenAsk }}</div>
  </div>
</Vorlage>
 
<Skript>
  Kinder aus „./children.vue“ importieren
  Standard exportieren {
    Daten() {
      zurückkehren {
        Titel: „Ich bin der von der übergeordneten Komponente übergebene Wert“,
        KinderFragen: ""
      }
    },
    Methoden: {
      getChildren(Wert) {
        this.childrenAsk = Wert
      }
    }
  }
</Skript>

<!-- Untergeordnete Komponente -->
<Vorlage>
  <div>
    <div>Von der übergeordneten Komponente übergebener Wert: {{ title }}</div>
    <button @click="askToFather">Klicken, um an die übergeordnete Komponente zu senden</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Requisiten: {
      Titel:
        Typ: Zeichenfolge
      }
    },
    Daten() {
      zurückkehren {
        askMsg: „Das habe ich der übergeordneten Komponente gesagt“
      }
    },
    Methoden: {
      fragDenVater() {
        dies.$emit("getChildren", dies.askMsg)
      }
    }
  }
</Skript>

<Vorlage>
  <div style="color: aqua">Übergeordnete Komponente</div>
  <div>Die untergeordnete Komponente sagt mir: {{ children_msg }}</div>
  <Kinder :title="msg" @listen="listenToChildren"></Kinder>
  {{ Wert }}
</Vorlage>
<script lang="ts">
Importiere untergeordnete Elemente aus „@/views/component_emit/children.vue“
importiere { defineComponent, ref } von "vue"
exportiere StandarddefiniereKomponente({
  Komponenten:
    Kinder,
  },
  Name: "Vater",
  aufstellen() {
    let msg = "Ich bin die übergeordnete Komponente"
    let children_msg = ref("") // Die Funktion von ref besteht darin, Reaktionsfähigkeit zu implementieren. Wenn kein ref vorhanden ist, kann Reaktionsfähigkeit nicht implementiert werden (Referenzdatentypen verwenden reaktiv).
    listenToChildren = (Wert) => {
      children_msg.value = val // Um ​​von ref umschlossene Daten zu verwenden, müssen Sie auf deren Wert in der Form .value zugreifen}
    zurückkehren {
      Nachricht,
      Kindernachricht,
      listenToChildren,
    }
  },
})
</Skript>
<Stil></Stil>

<Vorlage>
  <div style="color: brown">Unterkomponenten</div>
  <!-- Die Methode der Eltern-Kind-Übertragung ist dieselbe wie bei vue2-->
  <div>Der von der übergeordneten Komponente übergebene Wert lautet: {{ title }}</div>
  <button @click="sayToFather">Mit der übergeordneten Komponente sprechen</button>
</Vorlage>
<script lang="ts">
importiere { defineComponent } von "vue"
exportiere StandarddefiniereKomponente({
  Name: "Kinder",
  Requisiten: {
    Titel:
      Typ: Zeichenfolge,
    },
  },
  setup(Eigenschaften, Kontext) {
    // Der Zweck des Kontexts besteht darin, das Kontextobjekt zu erhalten.
    // Wenn setup als setup(props, { emit }) geschrieben wird, kann der folgende Kontext weggelassen werden const sayToFather = () => {
      const ask = "Ich bin eine untergeordnete Komponente, ich spreche mit der übergeordneten Komponente"
      Kontext.emit("zuhören", fragen)
    }
    zurückkehren {
      sagZuVater,
    }
  },
})
</Skript>
<Stil></Stil>