Comment Vue implémente-t-il des nœuds enfants pour effectuer des opérations lorsque la fenêtre parent est fermée ?

La fenêtre parent du nœud enfant Vue est fermée

Dans les applications Vue, nous rencontrons souvent des situations où un composant (nœud enfant) doit effectuer certaines opérations lorsque la fenêtre parent est fermée.

Par exemple, dans une boîte modale, nous espérons que lorsque l'on clique sur le bouton de fermeture de la boîte modale, le formulaire sera soumis et le composant de la boîte modale sera détruit en même temps.

Donc, dans une application Vue, comment implémenter des nœuds enfants pour effectuer certaines opérations lorsque la fenêtre parent est fermée ?

Méthode 1 : utilisez l'événement $emit

Le composant Vue fournit la méthode $emit, qui peut être utilisée pour déclencher des événements personnalisés et transmettre des données au composant parent.

Dans le nœud enfant, nous pouvons écouter l'événement de fermeture de la fenêtre parent, puis déclencher un événement personnalisé :

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

Dans la fenêtre parent, nous pouvons lier l'événement d'écoute au label du nœud enfant et le soumettre lorsqu'il est fermé Formez et détruisez le composant de boîte modale :

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

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

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

Méthode 2 : utilisez l'attribut $parent

En plus d'utiliser l'événement $emit, nous pouvons également utiliser l'attribut $parent pour obtenir l'instance du composant parent, puis appeler la méthode du composant parent.

Dans le nœud enfant, nous pouvons utiliser l'attribut $parent pour obtenir l'instance du composant parent, puis appeler la méthode close du composant parent :

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

Dans la fenêtre parent, nous devons définir une fermeture sur l'instance du modal box, puis appelez la méthode dans le nœud enfant :

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

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

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

Résumé

Dans une application Vue, lorsque le nœud enfant doit effectuer certaines opérations lorsque la fenêtre parent est fermée, nous pouvons utiliser l'événement $emit ou le Attribut $parent.

L'utilisation de l'événement $emit peut rendre les composants du nœud enfant plus flexibles et peut être réutilisé dans différents composants parents, mais vous devez écrire manuellement les événements d'écoute dans le composant parent.

L'utilisation de l'attribut $parent peut rendre le composant du nœud enfant plus concis. Il vous suffit d'appeler la méthode du composant parent, mais vous devez définir manuellement la méthode de fermeture dans le composant parent et la transmettre au nœud enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!