vue中如何檢查子元件是否掛載？

Question

我想檢查子元件是否已安裝，並且我想將該資訊移至父元件。為此，我正在使用發射。 因此，這裡的範例是我的父元件：

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

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

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

在子元件中，我將“is-child-mounted”更改為 true：

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

但是if (this.childMounted)仍然為假。那麼如果子元件已掛載，如何檢查父元件呢？

Answer 1

您可以在父元件的子元件上新增偵聽器。它看起來像這樣：

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

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

您可以將鉤子名稱替換為您想要監聽的生命週期名稱！我想它應該很少使用，因為它沒有出現在文件中，因此是一個內部 API，注定不能直接使用。

來源：

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

##