Bagaimana untuk menyemak sama ada subkomponen dipasang dalam Vue?

Question

Saya ingin menyemak sama ada komponen anak telah dipasang dan saya ingin mengalihkan maklumat tersebut ke komponen induk. Untuk ini saya menggunakan pelancaran. Jadi inilah contoh komponen induk saya:

<child @is-child-mounted="childMounted" />

export default {
  data() {
    return {
      childMounted: false,
    };
  },

  mounted() {
    if (this.childMounted) {
      //do something
    }
  },
}

Dalam komponen kanak-kanak saya menukar "is-child-mounted" kepada benar:

mounted() {
    this.$emit('isChildMounted', true);
  },

Tetapi jika (this.childMounted) masih palsu. Jadi bagaimana untuk menyemak komponen induk jika komponen anak dipasang?

Answer 1

Anda boleh menambah pendengar pada komponen anak bagi komponen induk. Ia kelihatan seperti ini:

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

Vue2
      <Component
         @hook:mounted="handleMounted"
      />

Anda boleh menggantikan nama cangkuk dengan nama kitaran hayat yang anda mahu dengar! Saya bayangkan ia sepatutnya jarang digunakan, kerana ia tidak muncul dalam dokumentasi dan oleh itu merupakan API dalaman, yang ditakdirkan untuk tidak digunakan secara langsung.

Sumber:

• https://github.com/vuejs/core/issues/4345 #issuecomment-899082892
• https://github.com /vuejs/vue/blob/8d3fce029f20a73d5d0b1ff10cbf6fa73c989e62/src/core/instance/lifecycle.js#L348