最近開發后台系統,需要調用子組件方法,思來想去,想到了refs,奈何在其中一個方法中可以正常調用,但是到了tab切換里面卻報子組件方法未定義,一時半會沒想到原因(也許是因為最近加班太多,腦容量不夠了,哈哈),先上代碼:
到這一步通過this.$refs.records.fetchTableData()無法調用<table-list-records>子組件的方法,控制台返回fetchTableData未定義,如下:
但是在同一個界面另一個方法中卻能正常執行:
這里是在界面請求到用戶詳情數據之后才去調用fetchTableData方法。一開始並沒有去想為什么這里可以在切換tab時就不能,后來想到可能是因為組件沒有渲染完畢,果然,在tab切換的方法里面將 fetchTableData放到this.nextTick中之后,方法正常執行了!
百度了一番之后看到也有其他方法解決refs無法取到子組件的方法,比如加上setTimeout,但是這個方法有個弊端,就是無法准確判斷什么時間頁面加載完畢,把代碼也貼出來吧:
這里建議還是使用this.$refs.nextTick,這樣比較准確一點,就這樣,共勉!