vue 踩坑--父组件调用子组件方法，报错

最新推荐文章于 2024-12-12 20:00:00 发布
原创 最新推荐文章于 2024-12-12 20:00:00 发布 · 3.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了在Vue中，父组件尝试调用子组件方法时遇到的常见问题，包括子页面加载未完成和引用ref的错误。解决方法包括在调用时使用setTimeout进行延迟处理，以及检查$refs的拼写是否正确。此外，提供了详细的父组件调用子组件方法的参考步骤。

 父组件，调用子组件的方法，报如下错误

 分析解决：1、可能子页面加载未完成，父组件调用子组件方法加延时处理

setTimeout(() => {
  this.$refs.notice.getInfo(item);
}, 15);

2、若加了延时处理，还是报一样的错误，代码写错了，我这是父页面引用的时候把ref写成refs了，因为跟调用的$refs很像，注意不要弄错了，一错错大半天。泪奔，引以为鉴。

 

ps:父组件调用子组件的方法可以参考:父组件控制子组件的显示与隐藏_wx前端小白的博客-优快云博客_子组件控制父组件的显示隐藏

小程序和App端国际化报错？uniapp迁移Vue3踩坑记
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-21 230
uniappVue3国际化小程序Appi18n我一开始以为是我用法不对，结果查文档才发现，这锅还真不在我，是。
Vue.js下使用vue-full-calendar的那些坑（一）
我不喜欢打代码的博客
11-08 7567
Vue.js下使用vue-full-calendar的那些坑（一） 近期本实习生接到一个任务就是用大日历组件开发一个日程管理的功能，刚刚接到这个任务时我立马想到了full-calendar的日历组件，因为它接口多，功能强大，但是在vue下使用该full-calendar就得用vue版本的vue-full-calendar，这就导致了一些问题，就是vue-full-calendar没有很详细的api...
vue通过父组件调用子组件方法报错 this.$refs.questionInfo is undefined
qq_53825610的博客
11-16 1053
在js里通过 this.$refs.questionInfo.getList();调用子组件方法，界面报错 this.$refs.questionInfo is undefined。时，子组件尚未完全挂载。Vue在编译和渲染过程中是异步执行的，因此在访问。错误可能是因为尝试访问子组件的。之前，需要等到子组件完全挂载。
vue父组件调用子组件方法报错的解决方法
二三的博客
12-18 4741
vue父组件调用子组件方法报错 在父组件定义了一个tab标签页，每一个标签页下面都调用不同的组件，如下图所示： 子组件中定义的方法： setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page: s
vue 使用ref 让父组件调用子组件的方法
08-28
主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
【vue】在父组件created中$refs调用子组件内方法问题报错
qq_47875931的博客
01-11 850
类似在父组件中created()、mounted()中生命周期运行在子组件生成前的钩子函数中去refs调用子组件的方法。打印显示 this.$refs.xxx 为 undefined。父组件中import引入了子组件，并且在components中注册了，但是使用。方式，利用nextTick包含调用方法保证子组件加载完毕后才可以调用。为undefined，所以肯定没有内部方法initData()写项目遇到一个问题，关于父子组件间的ref调用问题。报错，表示没有initData()这个方法。
自定义v-model事件
Pgy121的博客
09-08 3273
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
[Vue3]父子组件相互传值数据同步
Supposelll的博客
02-04 3910
父传子：`defineProps`、`defineEmits` 子传父：`defineExpose` 双向绑定：`v-bind`
踩坑记19 element-plus 根据视口尺寸隐藏元素 | vue3 v-model props emit 二次封装el组件 | vite import 路径 Vetur报错
Alloom的博客
09-03 1253
2021.9.3 坑61（element-plus、根据视口尺寸隐藏元素）：文档要求引入文件import 'element-plus/lib/theme-chalk/display.css'，其中地址错误，查看包文件结构后，确认地址应该为： import 'element-plus/theme-chalk/display.css'; 地址改变的原因是element-plus更新到1.1.0-beta.1版本的时候的变化。详细见：Breaking changes made in 1.1.0-bet..
vue2升级vue3踩坑记录（二）mixins 和 vue-router
weixin_43938253的博客
11-29 1667
Ant Design of Vue的V2版本表单校验和vue-router 4.1.6版本的填坑记录
vue 父组件使用this.$refs调用子组件报错，undefined、not a function问题解决方法
m0_58893670的博客
04-26 5921
父组件调用子组件方法，一直报 not a function
Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“
星云
09-30 9515
症状 一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。 <!-- 子组件 --> <template> … <el-pagination layout="prev, pager, next" :page-count=
vue父组件调用子组件this.$refs报错，undefined、not a function问题解决方法
Rocky balboa
08-21 8450
需要拿到ref的下标才行,父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。这种情况下，一般都是父组件调用子组件方法的时候，子组件还未渲染成功。父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。父beforeUpdate->子beforeUpdate->子updated->父updated。
vue父组件使用ref调用子组件方法报错问题
A4006的博客
11-12 3811
vue项目中父组件使用 $ref 来调用子组件的方法时报错，一开始控制台会报错，关掉弹窗并且不刷新的情况下页面就没问题，解决办法简单粗暴~ 两种方法都可以，但是第二种更直观优化。 第一种使用定时器来解决方法未加载，因为 ref 属性初始渲染时，子组件还未挂载好，这时这个方法还不存在，所以不能访问。加个定时器延时执行。但是延迟一秒数据显示出来就会很直面的看见这个页面的加载问题； 所以，第二种方法是更合适的来解决DOM元素未加载完毕，让方法等一等 ...
解决vue2中父组件中通过this.$refs调用子组件方法失败的问题
最新发布
涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等
12-12 1197
解决vue2中父组件中通过this.$refs调用子组件方法失败的问题
关于父组件引用子组件方法报错问题
zgzga的博客
01-08 536
在页面中引用了倒计时组件，倒计时结束时触发子组件的方法 1.在页面中先引入count-down组件 并在 components里注册 2.引用子组件 定义ref与倒计时结束时触发的方法 3.父组件通过this.$refs调用子组件中的方法hand_exam 这时候出现了hand_exam未定义的异常 这个问题出现肯定是我没有得到子组件的实例,所以调用的时候出现了undefined异常。 我的子组件没有在页面初始化时加载,而是在点击某个特定的按钮后才开始显示加载 改后的代码 ...
完美解决vue+typescript中父组件调用子组件报错解决办法
不停
08-18 2504
文章目录一 不用typescript时父组件调用子组件中的方法1. 子组件2. 父组件3. 结果一 用typescript时父组件调用子组件中的方法一. 方法11. 子组件2. 父组件二. 方法21. 子组件2. 父组件 一 不用typescript时父组件调用子组件中的方法 1. 子组件 <template> <div class="echild" @click="lg"> child </div> </template> //methods
vue3父组件通过ref调用子组件方法显示undefined的问题(子组件使用setup语法糖)
weixin_40565812的博客
02-13 6122
vue3父组件通过ref调用子组件方法显示undefined的问题(子组件使用setup语法糖)
解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null
jiaohuizhuang6019的博客
11-06 5488
解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null
vue3父组件调用子组件方法报错
09-28
在Vue3中，父组件调用子组件的方法可能会报错，原因是在created或mounted钩子函数中调用子组件的方法时，子组件的方法可能还没有被加载完毕。为了解决这个问题，可以使用$nextTick方法来确保子组件已经被完全加载后...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值