Wie implementiert Vue untergeordnete Knoten, um Vorgänge auszuführen, wenn das übergeordnete Fenster geschlossen ist?

Vue Das übergeordnete Fenster des untergeordneten Knotens ist geschlossen

In Vue-Anwendungen stoßen wir häufig auf Situationen, in denen wir eine Komponente (untergeordneten Knoten) benötigen, um einige Vorgänge auszuführen, wenn das übergeordnete Fenster geschlossen ist.

In einer Modalbox hoffen wir beispielsweise, dass beim Klicken auf die Schaltfläche „Schließen“ der Modalbox das Formular gesendet und gleichzeitig die Modalboxkomponente zerstört wird.

Wie implementieren Sie also in einer Vue-Anwendung untergeordnete Knoten, um einige Vorgänge auszuführen, wenn das übergeordnete Fenster geschlossen ist?

Methode 1: Verwenden Sie das $emit-Ereignis

Die Vue-Komponente stellt die $emit-Methode bereit, mit der benutzerdefinierte Ereignisse ausgelöst und Daten an die übergeordnete Komponente übergeben werden können.

Im untergeordneten Knoten können wir das Schließereignis des übergeordneten Fensters abhören und dann ein benutzerdefiniertes Ereignis auslösen:

methods: {
  onClose() {
    this.$emit('close');
  }
}

Im übergeordneten Fenster können wir ein Zuhören binden Ereignis an das Etikett senden, das Formular absenden und die modale Boxkomponente zerstören, wenn sie geschlossen wird:

<modal-dialog @close="handleSubmit">
  <!-- 模态框内容 -->
</modal-dialog>

methods: {
  handleSubmit() {
    // 提交表单
    // ...

    // 销毁模态框组件
    this.$refs.modalDialog.$destroy();
  }
}

Methode 2: Verwenden Sie das $parent-Attribut

Zusätzlich zur Verwendung des $ Ereignis ausgeben, Wir können auch das Attribut $parent verwenden, um die Instanz der übergeordneten Komponente abzurufen und dann die Methode der übergeordneten Komponente aufzurufen.

Im untergeordneten Knoten können wir das Attribut $parent verwenden, um die Instanz der übergeordneten Komponente abzurufen, und dann die Schließmethode der übergeordneten Komponente aufrufen:

methods: {
  onClose() {
    this.$parent.close();
  }
}

Im übergeordneten Fenster Wir müssen eine Close-Methode für die Instanz der Modal-Box-Komponente definieren und dann die Methode im untergeordneten Knoten aufrufen:

<modal-dialog ref="modalDialog">
  <!-- 模态框内容 -->
</modal-dialog>

mounted() {
  this.$refs.modalDialog.close = () => {
    // 提交表单
    // ...

    // 关闭模态框
    this.$refs.modalDialog.hide();
  }
}

Summary

In einer Vue-Anwendung, Der untergeordnete Knoten muss sich in befinden. Wenn das übergeordnete Fenster geschlossen ist und einige Vorgänge ausgeführt werden, können wir das Ereignis $emit oder die Eigenschaft $parent verwenden.

Die Verwendung des $emit-Ereignisses kann untergeordnete Knotenkomponenten flexibler machen und in verschiedenen übergeordneten Komponenten wiederverwendet werden, Sie müssen jedoch Abhörereignisse manuell in die übergeordnete Komponente schreiben.

Die Verwendung des $parent-Attributs kann die untergeordnete Knotenkomponente prägnanter machen. Sie müssen nur die Methode der übergeordneten Komponente aufrufen, aber Sie müssen die Abschlussmethode in der übergeordneten Komponente manuell definieren und übergeben zum untergeordneten Knoten.

Das obige ist der detaillierte Inhalt vonWie implementiert Vue untergeordnete Knoten, um Vorgänge auszuführen, wenn das übergeordnete Fenster geschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!