vue父組件調用子組件方法報錯問題及解決
更新時間：2022年09月05日 08:39:49 作者：小劉加油！
這篇文章主要介紹了vue父組件調用子組件方法報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue父組件調用子組件方法報錯
在父組件定義了一個tab標簽頁，每一個標簽頁下面都調用不同的組件，
如下圖所示：
子組件中定義的方法：
setup() {
const getList = () =>{
const date = moment(new Date()).format('YYYY-MM')
loading.value = true
apiGetPageList({
salaryDate: date,
page: state.pagination.page,
limit: state.pagination.limit,
jobNo: state.formState.searchValue ? state.formState.searchValue : null
}).then((res: any)=> {
if (res.data.status == 200) {
state.dataSource = res.data.data.rows
state.pagination.total = res.data.data.total
} else {
Message.error(res.data.message ? res.data.message : "獲取數據失敗")
}
}).finally(()=>{
loading.value = false
})
}
return {
getList
}
}
父組件中使用tab標簽頁的change方法，每次點擊不同tab頁的時候，都會調用該子組件的獲取列表數據的接口。
一開始的思路是：在父組件中調用子組件的時候使用ref屬性，通過ref拿到子組件的方法，然后在change方法中進行調用。但在實際開發(fā)中，卻出現了問題，切換到tab頁時，控制臺會報錯，如下所示：
這個是因為異步執(zhí)行的原型，子組件還沒渲染完就調用方法會出現這樣的情況。在網上百度了下解決方法，只需要在子組件中定義的方法中加上this.$nextTick就可以解決。
這種方法的確可以，但我試了試另一種方法：在父組件中的change方法中加上nextTick，想驗證下是否能夠解決，結果是能夠正常調用。
代碼如下所示：
setup() {
const changeTab = (active: any) => {
switch (active) {
case "2":
console.log(33333,areaWorkDay)
nextTick(()=>{
areaWorkDay.value.editTableData = {}
areaWorkDay.value.getPageList()
areaWorkDay.value.formRef.resetFields()
})
break;
case "3":
console.log(111,monthSalaryRef)
// monthSalaryRef.value.$emit('getList')
nextTick(()=>{
monthSalaryRef.value.editTableData = {}
monthSalaryRef.value.getList()
monthSalaryRef.value.monthRef.resetFields()
})
break;
}
}
return {
changeTab
}
}
這樣也可以解決父組件調用子組件的時候，因為異步執(zhí)行，子組件方法還沒初始化完成，導致控制臺報錯的問題。
vue父組件調用子組件方法及遇到的問題
在子組件methods選項中定義方法method()，在父組件中引用子組件，并在子組件標簽中定義ref=‘xxx’，使用this.$refs.xxx.method()調用子組件方法。
但chrome控制臺報錯該方法undifined，原因是因為使用ref調用子組件是調用的實例，但調用時該實例還未加載完，因此調用的方法undifined。
解決方法：在父組件中調用時，先加載完組件實例再調用方法：
this.$nextTick( () => {
?? ?this.$refs.xxx.method()
} )以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在現代Web應用中，PDF文檔的使用非常普遍，因為它可以在各種設備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
這篇文章主要介紹了Vue項目中Api的組織和返回數據處理的操作，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
今天小編就為大家分享一篇Vue監(jiān)聽事件實現計數點擊依次增加的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關于vue跳轉頁面的幾種常用方法,vue跳轉頁面有好幾種不同方法,文中通過代碼將實現的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue項目中引入外部的js文件的10種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以參考下2023-08-08
這篇文章主要介紹了Vue+ElementUI啟動vue卡死的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07