
Cannot read property '$el' of undefined at VueComponent
发布日期:2021-05-08 17:20:14
浏览次数:16
分类:精选文章
本文共 646 字,大约阅读时间需要 2 分钟。
在.vue文件中使用子组件时,确保正确引用子组件并获取到对应的DOM对象是关键步骤。以下是解决问题的详细分析和步骤:
问题分析:
- 在父组件的template中,子组件被正确引用,如
<scroll ref="lyricList"></scroll>
。 - 在方法中,尝试通过
this.$refs.lyricList.$el
获取子组件的DOM对象。 - 发现错误提示
$el属性未定义
,错误发生在middleTouchMove()
函数中。
错误原因:
- 子组件的
ref
属性在父组件中与在JS中引用不一致。 - 检查发现,在父组件的template中,
ref
的值可能写成了"lyriclist"
,而在JS中引用为"lyricList"
,导致无法获取到正确的子组件实例。
解决方法:
- 确保父组件的template中子组件的
ref
值与JS中引用一致。 - 检查组件的结构,确认子组件是否正确导入并在父组件中使用。
- 确保在父组件的
methods
中有正确的方法来处理滑动事件。
验证步骤:
- 检查浏览器的开发者工具,确保
$refs
对象中包含lyricList
,从而确认子组件是否被正确引用。 - 如果发现
$refs
中没有lyricList
,则检查父组件的template中的ref
值是否正确,或者子组件是否有自定义的ref
处理方式。 - 确保子组件正确地暴露了
$el
属性,或者在需要访问DOM时,使用正确的方法来获取。
通过以上步骤,可以确保子组件被正确引用,并且在父组件中能够正确访问到子组件的DOM对象,从而解决$el未定义
的错误。
发表评论
最新留言
很好
[***.229.124.182]2025年04月17日 05时26分32秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
WCF学习之旅—第三个示例之一(二十七)
2019-03-06
java ThreadPoolExecutor初探
2019-03-06
Markdown进阶
2019-03-06
快速指数算法
2019-03-06
python去除字符串中的特殊字符(爬虫存储数据时会遇到不能作为文件名的字符串)
2019-03-06
PHP将网址快捷方式保存到桌面
2019-03-06
SpringCloud微服务(03):Hystrix组件,实现服务熔断
2019-03-06
Spring 框架基础(01):核心组件总结,基础环境搭建
2019-03-06
JavaEE基础(02):Servlet核心API用法详解
2019-03-06
SpringBoot2 整合Nacos组件,环境搭建和入门案例详解
2019-03-06
结构与算法(03):单向链表和双向链表
2019-03-06
Hadoop框架:MapReduce基本原理和入门案例
2019-03-06
ThreadPoolExecutor线程池任务执行失败的时候会怎样
2019-03-06
Sentry快速开始并集成钉钉群机器人
2019-03-06
Docker 服务
2019-03-06
第一眼就心动的人还怎么做朋友
2019-03-06
Cassandra数据建模
2019-03-06
Elasticsearch Web管理工具
2019-03-06
前端样式css问题记录
2019-03-06