vue父組件調(diào)用子組件方法報錯問題及解決
vue父組件調(diào)用子組件方法報錯
在父組件定義了一個tab標(biāo)簽頁，每一個標(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頁的時候，都會調(diào)用該子組件的獲取列表數(shù)據(jù)的接口。
一開始的思路是：在父組件中調(diào)用子組件的時候使用ref屬性，通過ref拿到子組件的方法，然后在change方法中進(jìn)行調(diào)用。但在實(shí)際開發(fā)中，卻出現(xiàn)了問題，切換到tab頁時，控制臺會報錯，如下所示：
這個是因?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)用子組件的時候，因?yàn)楫惒綀?zhí)行，子組件方法還沒初始化完成，導(dǎo)致控制臺報錯的問題。
vue父組件調(diào)用子組件方法及遇到的問題
在子組件methods選項中定義方法method()，在父組件中引用子組件，并在子組件標(biāo)簽中定義ref=‘xxx’，使用this.$refs.xxx.method()調(diào)用子組件方法。
但chrome控制臺報錯該方法undifined，原因是因?yàn)槭褂胷ef調(diào)用子組件是調(diào)用的實(shí)例，但調(diào)用時該實(shí)例還未加載完，因此調(diào)用的方法undifined。
解決方法：在父組件中調(diào)用時，先加載完組件實(shí)例再調(diào)用方法：
this.$nextTick( () => {
?? ?this.$refs.xxx.method()
} )以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件
better-scroll 是一款重點(diǎn)解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件的實(shí)例代碼,需要的朋友可以參考下2020-03-03
在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)
這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
今天小編就為大家分享一篇修改vue+webpack run build的路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue加載天氣組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在Vue3.0框架中,hooks函數(shù)允許將組件邏輯抽離復(fù)用,提高代碼的可維護(hù)性和復(fù)用性,通過封裝邏輯如獲取數(shù)據(jù)、處理狀態(tài)等,hooks使得組件開發(fā)更加高效和清晰,示例中,useDog.ts用于獲取狗狗圖片,展示了hooks封裝數(shù)據(jù)和邏輯、響應(yīng)式數(shù)據(jù)和異步操作的能力2024-10-10
vue路由前進(jìn)后退動畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
element中async-validator異步請求驗(yàn)證使用
本文主要介紹了element中async-validator異步請求驗(yàn)證使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果
這篇文章主要為大家詳細(xì)介紹了vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
AT-UI 是一款基于 Vue.js 2.0 的輕量級、模塊化前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品。下面通過本文給大家介紹Vue 2.0的模塊化前端 UI 組件庫，需要的朋友參考下吧2017-12-12