vue父组件调用子组件this.$refs报错,undefined、not a function问题解决方法

简介: vue父组件调用子组件this.$refs报错,undefined、not a function问题解决方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站点击跳转浏览。


一、提示undefined


这种情况下,一般都是父组件调用子组件方法的时候,子组件还未渲染成功。要搞清楚这个问题,我们要搞清楚父子组件的生命周期就行了。


1,加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2,子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

3,父组件更新过程

父beforeUpdate->父updated

4,销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed


二、提示not a function


这种情况下,一般都是未找到子组件的ref。如下图所示,我的子组件放在v-for中,这时我的ref是个数组,就不能直接用this.$refs.myChild.init()。需要拿到ref的下标才行,

就是标明的意思是要知道里面的子组件用的位置,不要用错了

https://blog.csdn.net/ChOLg/article/details/102991854这篇文章就是误导

参考https://blog.csdn.net/weixin_41698051/article/details/112670188这篇

相关文章
|
4月前
|
API C++
【Azure 环境】VS Code登录China Azure(Function)报错 An error occurred while signing in: invalid_request - AADSTS65002
An error occurred while signing in: invalid_request - AADSTS65002: Consent between first party application 'c27c220f-ce2f-4904-927d-333864217eeb' and first party resource '797f4846-ba00-4fd7-ba43-dac1f8f63013' must be configured via preauthorization - applications owned and operated by Microsoft mus
239 13
|
4月前
|
缓存 开发工具 C++
VS Code调试Function报错|无法加载Diagnostics.Abstractions怎么办?
在调试 Azure Function 时,可能出现 “Could not load file or assembly 'Microsoft.Extensions.Diagnostics.Abstractions, Version=8.0.0.0'” 错误,导致主机启动失败。本文详细解析该依赖加载错误的成因,并提供基于不同安装方式(NPM 或 MSI)的解决方案,涵盖重装 Core Tools、清理缓存、检查 .NET SDK 版本等操作步骤,同时提供日志排查与 Docker 容器化替代方案,帮助开发者快速恢复本地调试流程。
221 0
|
5月前
|
网络协议 API 网络安全
【Azure Function App】发现部分请求Function App遇见 403.72 报错(请求Body>100KB)
在调用Azure Function的HTTP Trigger时,发送POST请求偶尔出现403错误,且响应为空、Header信息少。经排查发现,当请求Body大于100KB时会触发403.72错误,原因是启用了“Client Certificate mode”为“Optional Interactive User”。解决方法是将该模式设置为“Ignore”。由于TLS重新协商机制限制,大请求体无法正常处理,导致此问题。
192 1
|
11月前
|
Java Windows
【Azure Function】部署Java Function失败:报错deploy [ERROR] Status code 401和警告 'China North 3' may not be a valid region
1:deploy [ERROR] Status code 401, (empty body). 2: China North 3 may not be a valid region,please refer to https://aka.ms/maven_function_configuration#supported-regions for values. 3:  <azure.functions.maven.plugin.version>1.36.0</azure.functions.maven.plugin.version>
194 11
|
8月前
|
人工智能 Python
083_类_对象_成员方法_method_函数_function_isinstance
本内容主要讲解Python中的数据类型与面向对象基础。回顾了变量类型(如字符串`str`和整型`int`)及其相互转换,探讨了加法在不同类型中的表现。通过超市商品分类比喻,引出“类型”概念,并深入解析类(class)与对象(object)的关系,例如具体橘子是橘子类的实例。还介绍了`isinstance`函数判断类型、`type`与`help`探索类型属性,以及`str`和`int`的不同方法。最终总结类是抽象类型,对象是其实例,不同类型的对象有独特运算和方法,为后续学习埋下伏笔。
179 7
083_类_对象_成员方法_method_函数_function_isinstance
|
8月前
|
Python
[oeasy]python086方法_method_函数_function_区别
本文详细解析了Python中方法(method)与函数(function)的区别。通过回顾列表操作如`append`,以及随机模块的使用,介绍了方法作为类的成员需要通过实例调用的特点。对比内建函数如`print`和`input`,它们无需对象即可直接调用。总结指出方法需基于对象调用且包含`self`参数,而函数独立存在无需`self`。最后提供了学习资源链接,方便进一步探索。
216 17
|
8月前
|
人工智能 Python
[oeasy]python083_类_对象_成员方法_method_函数_function_isinstance
本文介绍了Python中类、对象、成员方法及函数的概念。通过超市商品分类的例子,形象地解释了“类型”的概念,如整型(int)和字符串(str)是两种不同的数据类型。整型对象支持数字求和,字符串对象支持拼接。使用`isinstance`函数可以判断对象是否属于特定类型,例如判断变量是否为整型。此外,还探讨了面向对象编程(OOP)与面向过程编程的区别,并简要介绍了`type`和`help`函数的用法。最后总结指出,不同类型的对象有不同的运算和方法,如字符串有`find`和`index`方法,而整型没有。更多内容可参考文末提供的蓝桥、GitHub和Gitee链接。
220 11
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新特性,与传统函数相比,它有更简洁的语法,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。箭头函数不适用于构造函数,不能使用new关键字调用。
|
数据可视化 开发者 索引
详解Wireshark LUA插件函数:function p_myproto.dissector(buffer, pinfo, tree)
在 Wireshark 中,LUA 插件通过 `function p_myproto.dissector(buffer, pinfo, tree)` 扩展协议解析能力,解析自定义应用层协议。参数 `buffer` 是 `PacketBuffer` 类型,表示原始数据包内容;`pinfo` 是 `ProtoInfo` 类型,包含数据包元信息(如 IP 地址、协议类型等);`tree` 是
637 1

热门文章

最新文章