Bagaimanakah Vue melaksanakan nod anak untuk melaksanakan operasi apabila tetingkap induk ditutup?

Tetingkap induk nod anak Vue ditutup

Dalam aplikasi Vue, kita sering menghadapi situasi di mana komponen (nod anak) perlu melakukan beberapa operasi apabila tetingkap induk ditutup.

Sebagai contoh, dalam kotak modal, kami berharap apabila butang tutup kotak modal diklik, borang akan diserahkan dan komponen kotak modal akan dimusnahkan pada masa yang sama.

Jadi dalam aplikasi Vue, bagaimanakah anda melaksanakan nod anak untuk melaksanakan beberapa operasi apabila tetingkap induk ditutup?

Kaedah 1: Gunakan acara $emit

Komponen Vue menyediakan kaedah $emit, yang boleh digunakan untuk mencetuskan peristiwa tersuai dan menghantar data kepada komponen induk.

Dalam nod anak, kita boleh mendengar acara penutupan tetingkap induk, dan kemudian mencetuskan acara tersuai:

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

Dalam tetingkap induk, kita boleh pada nod anak label Ikat acara mendengar, serahkan borang dan musnahkan komponen kotak modal apabila menutup:

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

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

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

Kaedah 2: Gunakan atribut $parent

Selain menggunakan $ memancarkan peristiwa, kami Anda juga boleh menggunakan atribut $parent untuk mendapatkan contoh komponen induk, dan kemudian memanggil kaedah komponen induk.

Dalam nod anak, kita boleh menggunakan atribut $parent untuk mendapatkan contoh komponen induk, dan kemudian memanggil kaedah penutupan komponen induk:

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

Dalam tetingkap induk, kita perlu untuk Tentukan kaedah tutup pada contoh komponen kotak modal, dan kemudian panggil kaedah dalam nod anak:

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

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

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

Ringkasan

Dalam aplikasi Vue, anak nod perlu berada dalam induk Apabila melakukan beberapa operasi apabila tetingkap tahap ditutup, kita boleh menggunakan acara $emit atau harta $parent.

Menggunakan acara $emit boleh menjadikan komponen nod anak lebih fleksibel dan boleh digunakan semula dalam komponen induk yang berbeza, tetapi anda perlu menulis peristiwa mendengar secara manual dalam komponen induk.

Menggunakan atribut $parent boleh menjadikan komponen nod anak lebih ringkas Anda hanya perlu memanggil kaedah komponen induk, tetapi anda perlu mentakrifkan kaedah penutupan dalam komponen induk secara manual dan menyerahkannya kepada komponen induk. nod kanak-kanak.

Atas ialah kandungan terperinci Bagaimanakah Vue melaksanakan nod anak untuk melaksanakan operasi apabila tetingkap induk ditutup?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!