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方法中进行调用。但在实际开发中,却出现了问题,切换到tab页时,控制台会报错,如下所示:
在这里插入图片描述这个是因为异步执行的原型,子组件还没渲染完就调用方法会出现这样的情况。在网上百度了下解决方法,只需要在子组件中定义的方法中加上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
		}
}

这样也可以解决父组件调用子组件的时候,因为异步执行,子组件方法还没初始化完成,导致控制台报错的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值