首页 > 其他分享 >关于vue里的$refs属性

关于vue里的$refs属性

时间:2024-11-09 10:42:54浏览次数:3  
标签:msgText vue console log show refs testText 属性

vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。

this.$refs.xxx为undefined的几种情况记录:

1、在created里钩子函数中调用
原因:created()在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。

解决:在mounted () 钩子函数中调用

注意:在此种情况中,元素节点一定是直接写在html中的,而不是通过数据或者条件渲染的

2、数据或条件渲染(v-if,v-show)之后的调用
原因:

/** ref
本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的
$refs不是响应式的,只在组件渲染完成后才填充
用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上
调用对象是否和v-if结合使用
ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。
*/
解决:可以通过setTimeOut(()=>{...}, 0)来实现

<template>
<div>
<p ref="testText">this is a test data</p>
<p v-if="msg" ref="msgText"></p>
<button @click="handleClick">点一下</button>
</div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
data () {
return {
text: 'message show',
msg: ''
}
},
created () {
console.log(this.$refs.testText) // undefined
// this.$refs.testText.style.color = '#f00'
},
mounted () {
console.log(this.$refs.testText) // <p data-v-5752faac="" style="color: rgb(255, 0, 0);">this is a test data</p>
console.log(this.$refs.msgText) // undefined
this.$refs.testText.style.color = '#f00'
},
methods: {
handleClick () {
this.msg = 'msg show'
console.log(this.$refs.msgText) // undefined
setTimeout(() => {
this.$refs.msgText.style.color = '#eee'
console.log(this.$refs.msgText) // <p data-v-5752faac="" style="color: rgb(238, 238, 238);">msg show</p>
}, 0)
}
}
}

标签:msgText,vue,console,log,show,refs,testText,属性
From: https://www.cnblogs.com/sathcal/p/18536425

相关文章

  • vue中页面数据改变组件不重新渲染
    页面中引用组件additional-entrust.vue,当界面传的entrustGold值改变时,组件状态不重新渲染代码如下:<divclass="test"><additional-entrust:entrustFlag="entrustFlag":eachIncrease="auctionData.eachIncrease"......
  • 焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!
    你好,我是Kagol,个人公众号:前端开源星球。自从TinyVue组件库去年开源以来,一直有小伙伴反馈我们的UI不够美观,风格陈旧,不太满足现阶段审美。“TinyVue给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”看到这个评价,我是哭笑不得,一方面对小伙伴们真诚、友好的......
  • vue3组件应用 + 以及组件相关知识应用
    文章目录vue组件化开发一、什么是Vue组件化开发二、组件的创建方式三、组件的数据传递四、组件的生命周期五、组件的插槽(Slot)数据传递的方式实例组件生命周期应用场景插槽应用define相关应用vue组件化开发一、什么是Vue组件化开发概念Vue组件化开发是一种将用......
  • 【JAVA毕业设计】基于Vue和SpringBoot的技术交流分享平台
    博主说明:本文项目编号T053,文末自助获取源码\color{red}{T053,文末自助获......
  • 【JAVA毕业设计】基于Vue和SpringBoot的服装销售平台
    博主说明:本文项目编号T054,文末自助获取源码\color{red}{T054,文末自助获......
  • 【开题报告】基于Springboot+vue牧场信息化系统(程序+源码+论文) 计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着科技的飞速发展和信息化时代的到来,传统牧场管理模式正面临前所未有的挑战与机遇。传统牧场往往依赖人工记录与监控,这种方式不仅效率低下,而且容易......
  • 【开题报告】基于Springboot+vue停车场管理系统(程序+源码+论文) 计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速,车辆数量急剧增加,停车难已成为各大城市普遍面临的问题。传统的停车场管理方式存在诸多不足,如车位利用率低、停车体验差、管理效......
  • 【开题报告】基于Springboot+vue校园畅聊交友平台的设计与实现(程序+源码+论文) 计算机
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和智能设备的普及,大学生们的社交方式正经历着深刻的变革。传统的面对面交流虽然仍然重要,但线上社交平台以其便捷性和高效性,逐......
  • vue2关闭eslint
    要在整个项目中关闭ESLint,可以通过在vue.config.js中设置禁用lintOnSave。以下是具体步骤:1.打开或创建vue.config.js文件在项目根目录下找到vue.config.js文件。如果没有该文件,可以直接在项目根目录创建一个。2.添加lintOnSave:false配置在vue.config.js文件中......
  • 看一遍就会用——面向对象:类和对象,实例属性,实例方法,字符串表示
    python面向对象1.类和对象2.实例属性3.实例方法4.字符串表示1.__str__方法2.__repr__方法1.类和对象在Python中,类和对象是面向对象编程(OOP)的核心概念。类(Class)是创建对象的蓝图或模板,它定义了对象将拥有的属性和方法。对象(Object)则是根据类创建的具体实例,它包含了类......