this.$refs与created()的踩坑问题记录

最新推荐文章于 2024-08-15 09:30:00 发布
最新推荐文章于 2024-08-15 09:30:00 发布
阅读量825 收藏 2
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnlinxingan/article/details/118409188
版权
本文阐述了在Vue中使用$refs时遇到undefined错误的原因，即ref在DOM渲染完成后生成。提出通过在created生命周期钩子中加入$nextTick来确保在渲染完成后调用，从而解决了这个问题。
摘要由CSDN通过智能技术生成

问题：

  • List ite将this.$refs写在挂载期created()里，页面控制台报错undefind

原因：

  • ref在dom树渲染完成以后才会生成，而created()期是挂载的过程，dom树还没渲染完成，所以找不到ref,返回undefind.

解决方法

  • 在created()中加入this.$nextTick(()=>{}),在里面调用ref,此方法会在渲染完成后执行，可以解决渲染异步问题
变强就秃头
关注
vue项目使用jest单元测试常见问题
Kelly Quan的博客
07-10 2384
vue项目使用jest单元测试常见问题介绍.toBe(value)问题对应源码调用的方法都要进行mockcreated 调用了函数created 调用异步Promise函数其他情况： mock函数可以模拟返回值写在最后 介绍 项目是利用vue-cli创建的前端工程项目，在项目中引用jest进行单元测试。 参考：jest官方文档 .toBe(value)问题 toBe() 相当于Object.is()，在判断测试样例返回值和目标值是否一致上，对于Object对象只是判断地址是否一致，如果地址不一致就会判定为两
vue2.x + ts + element 踩坑初体验
weixin_43899935的博客
11-30 1250
1、this.message.error(′′)报类型“default”上不存在属性“message.error('') 报 类型“default”上不存在属性“message.error(′′)报类型“default”上不存在属性“message”。 解决方法： 在 tsconfig.json 里面添加 "types": [ "webpack-env", "./../element-ui/types" ], 原因： 然后再去看看element node-model的结
vue 在 created 中获取不到ref（this.$refs）
qq_17627195的博客
11-24 4484
原因： ref在dom树渲染完成以后才会生成，而created()是挂载的过程，dom树还没渲染完成，所以找不到ref返回undefind。 解决方法： 在created()中加入this.$nextTick(()=>{})，在此方法里面调用ref，this.$nextTick(()=>{})会在渲染完成后执行，可以用于解决渲染异步问题。 ...
vue-sse:一个Vue插件，用于使用服务器发送的事件（EventSource）
04-27
VueSSE VueSSE通过为基础提供高级接口，可以轻松使用。 安装 # npm npm install --save vue-sse # OR yarn yarn add vue-sse // in main.js import VueSSE from 'vue-sse' ; // using defaults Vue . use ( VueSSE ) ; // OR specify custom defaults (described below) Vue . use ( VueSSE , { format : 'json' , polyfill : true , url : '/my-events-server' withCredentials : true , } ) ; 快速开始 this . $sse . create ( '/my-events-serv
探索实时通信新纪元：VueSSE - 实时数据推送的利器
最新发布
gitblog_00021的博客
08-15 528
探索实时通信新纪元：VueSSE - 实时数据推送的利器 vue-sseA Vue plugin for using Server-Sent Events (EventSource).项目地址:https://gitcode.com/gh_mirrors/vu/vue-sse 在现代Web开发中，实现实时数据同步成为了一个重要的需求。VueSSE（Vue Server-Sent Events）是...
在vue2中使用SSE（服务器发送事件）
weixin_50163731的博客
02-07 1万+
在vue2中使用SSE（服务器发送事件）
SSE在vue2项目的使用
qq_56251369的博客
09-13 2314
这样，你就可以在Vue中使用SSE连接后端了。通过SSE连接，后端可以主动推送消息给前端，而无需前端主动刷新页面来获取更新的数据。首先，确保你已经安装了vue-sse库。对象来创建SSE连接，该对象可以接收一个URL参数，指定要连接的后端。生命周期中，记得关闭SSE连接。你可以在该生命周期钩子中调用。对于SSE连接，你可以将。生命周期中调用一个方法，来创建SSE连接。变量定义为一个空值或null来保存SSE实例。在Vue组件中，你可以使用。方法来手动关闭SSE连接。最后，在Vue组件的。
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2760
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
九、Vue-前端面试题库
qq_41994396的博客
05-06 316
项目的介绍, 因人而异, 可以找不同的网站, 先从网站的功能业务角度出发, 去介绍然后思考: 如果是现在让你写这样的功能页面, 你会如何实现!然后手写记录下来, 推算合理性 (遇到什么问题, 怎么解决的!),逐步完善对于项目的介绍以饿了么为例:1 基本业务介绍: 给用户提供外卖服务的2 技术栈: vue2 + vuex + vue-router + webpack + ES6/7 + axios+ sass + flex + svg定位功能选择城市搜索地址。
Typescript、Vue、小程序等等所有踩过的坑都在这了
努力努力再努力
09-04 2662
踩不完的坑 本文主要收录在项目开发和学习新技术时踩过的坑，总结于此加深记忆以及日后方便查阅。话痨博主，需要直接看答案的小伙伴直接Ctrl+F搜“言归正传”就是每一个问题的解决方案啦❤️ 本博文首发在我的gitpage，由于是用Vuepress写的，在CSDN可能会出现一些阅读上不太友好的问题(其实是因为我懒不想改了) 可以访问我的博客查看原文获取更好的阅读体验，可以顺手看看我的github有...
vue+ssr 项目踩坑...
LKFOOD的博客
03-20 3763
记录一些在项目过程中遇到的问题以及解决办法 1.组件开发 对于可重复复用的样式或结构，直接开发成对应的component，在vue组件中直接引用 例如：header部分 创建组件： 1）可在项目目录中新建一个components目录，用来存放各个公用的组件 2）新建一个header.vue文件（注：vue项目中所有的组件都是.vue结尾的文件） 包含三部分： <template> ...
springboot+redis+sse+vue实现分布式消息发布/通知
Leisurelyc的博客
11-17 7633
springboot+redis+sse+vue实现分布式消息发布/通知
VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用
zhouzuoluo的博客
07-18 1万+
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；   应用一：在DOM元素上使用$refs可以迅速进行dom定位，类似于$("selectId")，如下 ​ &lt;template&gt; &lt;div class="parent"&gt; &lt;...
Sse接收后端消息
小轩的学习日志
09-24 870
需求 后端主动推送消息给前端，之前做过的实时聊天系统，是使用webscoket实现前后端的双向通信，这次只需要接收后端推送的消息，故使用Sse实现 SSE(Server-Sent Events):是一种基于HTTP的，以流的形式由服务端持续向客户端发送数据的技术 实现 createEventSource() { if (window.EventSource) { this.source = new EventSource('/sse/connect/') this
vue中的$refs属性几个注意点
u010007013的博客
12-02 3534
1.在vue中获取dom推荐使用$refs来获取，可是有时会出现 this.$refs.xxx 为undefined的情况。 场景1：在created()里使用 在这个生命周期中进行数据观测 ，属性和方法的运算，watch 事件回调。但是页面还没有挂载上去，没有el属性，this.el 属性，this.el属性，this.refs无法调用dom。 解决办法：换成在mounted()里使用 场景2：父元素或当前元素使用了v-if或v-show 因为$refs不是响应式的，只在组件渲染完成后才会生效，
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
m0_61454727的博客
12-13 3700
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序），轻松加愉快
vue的this.$refs为空,$refs.xx组件为undefined
weixin_44952258的博客
07-15 2043
针对vue的this.$refs为空,组件找不到的情况
[原创] vue中的this.refs为空出现原因分析
热门推荐
大象的博客
06-08 3万+
场景：在使用vue过程中，本想调用子组件的数据，但尝试多次一直获取失败。经过分析有以下原因： 1，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。 2 ，this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。 总结:一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到...
vue.js中的created()与activated()的用法
qq_57528681的博客
04-26 8337
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。 // 获取列表数据 getTeamTree(val) { this.treeLoading = true; this.$http.position
this.$refs.scrollContainer.$refs.wrap
07-05
`this.$refs.scrollContainer.$refs.wrap` 是 Vue.js 中的一个特定引用语法，用于访问组件内的子元素。在这个表达式中： - `this.$refs` 是 Vue 实例提供的一个属性，用于在组件实例化后获取由开发者通过 `ref` 属性绑定的 DOM 元素或自定义组件实例。`scrollContainer` 应该是一个父组件中的 ref 名称，用来引用另一个组件或某个具有 `ref="wrap"` 的 DOM 元素。 - `$refs.scrollContainer` 就是根据 `scrollContainer` 这个 ref 找到的元素，它可能是一个 DOM 元素或者一个子组件实例。 - `.refs.wrap` 是对上述元素进一步查找，寻找名为 `wrap` 的子元素，这通常用于操作滚动容器内部的另一个元素。 这个表达式的用途可能是为了动态地操作或获取滚动容器 (`scrollContainer`) 内部的 `wrap` 元素，例如改变样式、添加事件监听器等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值