vue父组件调用子组件方法报错问题及解决
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
vue父组件调用子组件方法报错
在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件,
如下图所示:
子组件中定义的方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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,想验证下是否能够解决,结果是能够正常调用。
代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 } } |
这样也可以解决父组件调用子组件的时候,因为异步执行,子组件方法还没初始化完成,导致控制台报错的问题。
vue父组件调用子组件方法及遇到的问题
在子组件methods选项中定义方法method(),在父组件中引用子组件,并在子组件标签中定义ref=‘xxx’,使用this.$refs.xxx.method()调用子组件方法。
但chrome控制台报错该方法undifined,原因是因为使用ref调用子组件是调用的实例,但调用时该实例还未加载完,因此调用的方法undifined。
解决方法:在父组件中调用时,先加载完组件实例再调用方法:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码
这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧2024-01-01
最新评论