vue父組件調(diào)用子組件方法報(bào)錯(cuò)問題及解決
vue父組件調(diào)用子組件方法報(bào)錯(cuò)
在父組件定義了一個(gè)tab標(biāo)簽頁，每一個(gè)標(biāo)簽頁下面都調(diào)用不同的組件，
如下圖所示：
子組件中定義的方法：
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 : "獲取數(shù)據(jù)失敗")
}
}).finally(()=>{
loading.value = false
})
}
return {
getList
}
}
父組件中使用tab標(biāo)簽頁的change方法，每次點(diǎn)擊不同tab頁的時(shí)候，都會調(diào)用該子組件的獲取列表數(shù)據(jù)的接口。
一開始的思路是：在父組件中調(diào)用子組件的時(shí)候使用ref屬性，通過ref拿到子組件的方法，然后在change方法中進(jìn)行調(diào)用。但在實(shí)際開發(fā)中，卻出現(xiàn)了問題，切換到tab頁時(shí)，控制臺會報(bào)錯(cuò)，如下所示：
這個(gè)是因?yàn)楫惒綀?zhí)行的原型，子組件還沒渲染完就調(diào)用方法會出現(xiàn)這樣的情況。在網(wǎng)上百度了下解決方法，只需要在子組件中定義的方法中加上this.$nextTick就可以解決。
這種方法的確可以，但我試了試另一種方法：在父組件中的change方法中加上nextTick，想驗(yàn)證下是否能夠解決，結(jié)果是能夠正常調(diào)用。
代碼如下所示：
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
}
}
這樣也可以解決父組件調(diào)用子組件的時(shí)候，因?yàn)楫惒綀?zhí)行，子組件方法還沒初始化完成，導(dǎo)致控制臺報(bào)錯(cuò)的問題。
vue父組件調(diào)用子組件方法及遇到的問題
在子組件methods選項(xiàng)中定義方法method()，在父組件中引用子組件，并在子組件標(biāo)簽中定義ref=‘xxx’，使用this.$refs.xxx.method()調(diào)用子組件方法。
但chrome控制臺報(bào)錯(cuò)該方法undifined，原因是因?yàn)槭褂胷ef調(diào)用子組件是調(diào)用的實(shí)例，但調(diào)用時(shí)該實(shí)例還未加載完，因此調(diào)用的方法undifined。
解決方法：在父組件中調(diào)用時(shí)，先加載完組件實(shí)例再調(diào)用方法：
this.$nextTick( () => {
?? ?this.$refs.xxx.method()
} )以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,vue跳轉(zhuǎn)頁面有好幾種不同方法,文中通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中引入外部的js文件的10種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下2023-08-08
Vue+ElementUI啟動(dòng)vue卡死的問題及解決
這篇文章主要介紹了Vue+ElementUI啟動(dòng)vue卡死的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07