关于父组件引用子组件方法报错问题

最新推荐文章于 2023-11-16 13:41:10 发布
最新推荐文章于 2023-11-16 13:41:10 发布
阅读量474 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgzga/article/details/112358846
版权
本文详细介绍了在Vue中遇到的问题：在页面加载后延迟加载的子组件，尝试在倒计时结束时调用子组件的方法，但出现`hand_exam`未定义的异常。解决方案是确保在子组件正确加载后，再执行父组件对子组件方法的调用。文章讨论了Vue组件通信的基本原理，并提供了修改后的代码示例，帮助开发者理解如何在不同生命周期钩子中正确操作组件实例。
摘要由CSDN通过智能技术生成

在页面中引用了倒计时组件，倒计时结束时触发子组件的方法
1.在页面中先引入count-down组件 并在 components里注册
引入组件
2.引用子组件 定义ref与倒计时结束时触发的方法
使用组件
3.父组件通过this.$refs调用子组件中的方法hand_exam
在这里插入图片描述
这时候出现了hand_exam未定义的异常
这个问题出现肯定是我没有得到子组件的实例,所以调用的时候出现了undefined异常。 我的子组件没有在页面初始化时加载,而是在点击某个特定的按钮后才开始显示加载
在这里插入图片描述
改后的代码
在这里插入图片描述

假装小清新
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 踩坑--父组件调用子组件方法，报错
Generationofdonglin的博客
11-11 3222
父组件，调用子组件的方法，报如下错误 分析解决：1、可能子页面加载未完成，父组件调用子组件方法加延时处理 setTimeout(() => { this.$refs.notice.getInfo(item); }, 15); 2、若加了延时处理，还是报一样的错误，代码写错了，我这是父页面引用的时候把ref写成refs了，因为跟调用的$refs很像，注意不要弄错了，一错错大半天。泪奔，引以为鉴。 ps:父组件调用子组件的方法可以参考:父组件控制子组件的显示与隐藏_wx...
Vue父组件调用子组件的方法(亲测可用)
qq_42288851的博客
07-01 410
1.子组件使用ref,父组件直接调用(推荐) <child ref="mychild"></child> this.$refs.mychild.childMethod("嘿嘿嘿"); 2.子组件注册监听事件,父组件调用$emit触发 this.$refs.mychild.$emit('childMethod','嘿嘿嘿') // 方法1:触发监听事件 //子组件注册监听事件 this.$on('childMethod', (res) ...
父页面调用子组件问题
dqwdnishi的博客
08-21 143
1、如父页面需要调用很多子组件（表单） 当需要在父页面点提交验证所有数据时，需要在调用子组件的方法 提交时要判断符不符合规则
vue-cli学习总结 ——组件引入后报错
weixin_34319374的博客
08-27 96
项目报错：查看原因是：我在引入vHeader组件时在script标签里把components少写了一个 s。说明：这个报错不止一回，在这里记录一下防止再次出错!这个是正确的代码截图！！ 转载于:https://blog.51cto.com/11056727/216...
vue通过父组件调用子组件方法报错 this.$refs.questionInfo is undefined
最新发布
qq_53825610的博客
11-16 741
在js里通过 this.$refs.questionInfo.getList();调用子组件方法，界面报错 this.$refs.questionInfo is undefined。时，子组件尚未完全挂载。Vue在编译和渲染过程中是异步执行的，因此在访问。错误可能是因为尝试访问子组件的。之前，需要等到子组件完全挂载。
父组件使用this.$refs调用子组件参数或方法时，提示undefined的解决方法
weixin_42966151的博客
12-15 2969
报错信息：Vue warn]: Error in v-on handler: "TypeError: Cannot set property 'baseurl' of undefined" found in
【VUE】父组件在mounted/created 中调用子组件方法报错
少莫千华
01-13 4651
一、错误描述 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'createData' of undefined" vue.runtime.esm.js?2b0e:619 found in ---> <DataView> at src/components/index.vue <App> at src/App.vue ...
【解决vue3父组件通过ref调用子组件方法undefind问题】
qq_30312887的博客
03-10 2508
解决vue3父组件通过ref调用子组件方法undefind问题
Vue组件引入报错解决方法
欢迎关注公众号“雨林寻北”，添加个人微信codetrend（备注技术）。
02-22 8791
异步引入产生的组件延迟引入，一个同步异步问题。
vue 使用ref 让父组件调用子组件的方法
08-28
主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
在vue中使用this.$refs报错undefined找不到子组件的方法
此行必胜，你我顶峰相见
02-22 5757
最近遇见个问题 在父组件调用子组件的方法时报错undefined 这种情况一般都是父组件调用子组件方法的时候，子组件还未渲染成功 比如报错行是 this.$refs.passwordmodal.show(username); 可以改成上 this.$nextTick(()=>{ this.$refs.passwordmodal.show(username); }) ...
vue项目中父子组件在调用方法的时候出现undefined
OnlyJally的博客
10-25 2246
1. 使用vue中this.$nextTick() 2. 可以使用setTimeout
vue在父组件调用子组件时报undefined的问题
qq_29109193的博客
08-14 6490
出现这个问题的原因主要是在vue还没进行加载完方法的时候就开始进行执行组件方法就会报这个错误，解决的办法很简单，只要在让方法在vue加载完组件之后再进行执行就好了 ...
vue父组件使用ref调用子组件方法报错问题
A4006的博客
11-12 3372
vue项目中父组件使用 $ref 来调用子组件的方法时报错，一开始控制台会报错，关掉弹窗并且不刷新的情况下页面就没问题，解决办法简单粗暴~ 两种方法都可以，但是第二种更直观优化。 第一种使用定时器来解决方法未加载，因为 ref 属性初始渲染时，子组件还未挂载好，这时这个方法还不存在，所以不能访问。加个定时器延时执行。但是延迟一秒数据显示出来就会很直面的看见这个页面的加载问题； 所以，第二种方法是更合适的来解决DOM元素未加载完毕，让方法等一等 ...
vue父组件引入子组件错误
WXLeader的博客
04-01 1507
vue父组件引入子组件错误，兜转我一个小时的报错只在于一个符号 引入组件的时候，路径问题 引入当前文件夹的另外一个文件：import Children from 'components/Children.vue''，提示： 加上：“./”让把路径变成：import Children from './components/Children.vue'' 即可。 引用自定义组件的路径不能省略./或者../，如果一个依赖的引用路径不是以 ./ 或者 ../ 开头，会被认为是 npm 依赖 ...
父组件调用子组件的方法
热门推荐
zm_miner的博客
11-28 1万+
接着上一篇 搜索组件 - 父组件向子组件传值(子组件调用父组件方法) 上一篇最后问到, 如果我想通过父组件中的事件来触发子组件中的方法应该怎么做呢 首先, 第一步 子组件中写一个方法 比如说例子中的获取子组件input中的值 子组件js getInputData = () =&gt; { this.nameValue = this.state.nameValue; this.i...
vue3父组件调用子组件方法报错
09-28
在Vue3中，父组件调用子组件的方法可能会报错，原因是在created或mounted钩子函数中调用子组件的方法时，子组件的方法可能还没有被加载完毕。为了解决这个问题，可以使用$nextTick方法来确保子组件已经被完全加载后...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值