第vue父組件調(diào)用子組件方法報錯問題及解決目錄vue父組件調(diào)用子組件方法報錯vue父組件調(diào)用子組件方法及遇到的問題

vue父組件調(diào)用子組件方法報錯

在父組件定義了一個tab標簽頁，每一個標簽頁下面都調(diào)用不同的組件，

如下圖所示：

子組件中定義的方法：

setup(){

constgetList=()={

constdate=moment(newDate()).format('YYYY-MM')

loading.value=true

apiGetPageList({

salaryDate:date,

page:state.pagination.page,

limit:state.pagination.limit,

jobNo:state.formState.searchValuestate.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.messageres.data.message:"獲取數(shù)據(jù)失敗")

}).finally(()={

loading.value=false

return{

getList

父組件中使用tab標簽頁的change方法，每次點擊不同tab頁的時候，都會調(diào)用該子組件的獲取列表數(shù)據(jù)的接口。

一開始的思路是：在父組件中調(diào)用子組件的時候使用ref屬性，通過ref拿到子組件的方法，然后在change方法中進行調(diào)用。但在實際開發(fā)中，卻出現(xiàn)了問題，切換到tab頁時，控制臺會報錯，如下所示：

這個是因為異步執(zhí)行的原型，子組件還沒渲染完就調(diào)用方法會出現(xiàn)這樣的情況。在網(wǎng)上百度了下解決方法，只需要在子組件中定義的方法中加上this.$nextTick就可以解決。

這種方法的確可以，但我試了試另一種方法：在父組件中的change方法中加上nextTick，想驗證下是否能夠解決，結(jié)果是能夠正常調(diào)用。

代碼如下所示：

setup(){

constchangeTab=(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)用子組件的時候，因為異步執(zhí)行，子組件方法還沒初始化完成，導致控制臺報錯的問題。

vue父組件調(diào)用子組件方法及遇到的問題

在子組件methods選項中定義方法method()，在父組件中引用子組件，并在子組件標簽中定義ref=xxx，使用this.$refs.xxx.method()調(diào)用子組件方法。

但chrome控制臺報錯該方法undifined，原因是因為使用ref調(diào)用子組件是調(diào)用的實例，但調(diào)用時該實例還未加載完，因此調(diào)用的方法undifined。

解決方法：在父組件中調(diào)用時，先加載完組