【Vue】报错:this.$refs 引用子组件报错 is not a function

文章介绍了在Vue开发中遇到‘this.$refs.selectTree.onHideisnotafunction’错误的解决步骤,包括确认组件导入与注册、正确引用ref以及检查子组件方法是否存在。解决方案包括检查引用路径、ref绑定的大小写敏感性及确保子组件方法已定义。
摘要由CSDN通过智能技术生成

报错信息

  • this.$refs.selectTree.onHide is not a function
    在这里插入图片描述

解决方法

  1. 确保组件成功导出并挂载:
- 子组件需要 import,import 是请确保路径正确
	import selectTree from '@/components/select-tree';
- import 之后还需要在父组件的 component 中进行注册
	components: { selectTree }
  1. 打印下this.$refs.selectTree,看下他是否能正常获取到和他的返回格式

在这里插入图片描述

// 如上:上面的返回的是一个数组,所以我们应该这样用
this.$refs.selectTree[0].onHide();
  1. 如果打印this.$refs.selectTreeundefined,则检查ref绑定是否正常(区分大小写)
<select-tree ref = "selectTree"/>
// 错误示例:不分大小写
console.log(this.$refs.SelectTree)	// undefined
// 正确示例:区分大小写
console.log(this.$refs.selectTree)	// [VueComponent]
  1. 最后就是确保 子组件 里面存在这个方法
console.log(this.$refs.selectTree)

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值