Vue.js：“TypeError：無法讀取未定義的屬性（讀取'$refs）'”

Question

我們在子組件中從父組件觸發方法，如下所示：

await this.$refs.patientinputmask.$refs.patientpersonaldata.ChangePersonalData();
await this.$refs.patientinputmask.$refs.patientaddressdata.SavePersonalAddressObject();
await this.$refs.patientinputmask.$refs.patientbankaccountdata.SavePersonalBankAccountObject();
await this.$refs.patientinputmask.$refs.patientrelatedcontacts.SaveRelatedContactObject();
if (this.invoiceHN == true) {
          await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoiceKasseHeaderHN.SavePatientDataForInvoice();
          await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoicingTemplateHN.SavePatientTemplateConfigDTO();
        }

有時會發生錯誤：[Vue warn]: Error in von handler (Promises/async): "TypeError: Cannot read properties of undefined (reading '$refs')" 這會導致整個級聯函數調用崩潰和這些方法都沒有被觸發。 方法和數據位於子組件中。 什么問題會導致這種行為？

Answer 1

運行代碼時，聽起來有些子組件沒有完全安裝。 您何時在父元素上運行此代碼？

您可以在掛載時從每個子組件觸發一個事件，然后在所有子組件都掛載后運行您的代碼。

<child-component @hook:mounted="doSomething" />

（此處找到示例： Vue JS 2.0 Child Component Mounted Callback ）