VUE中$refs和$el的使用详解
ref: 给元素或者子组件注册引用信息
ref有三种用法:
1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素。
<div ref="system">测试</div>
// 获取
mounted() {console.log(this.$refs.system);
}
2.ref加在子组件上,用this.$ref.xxx可以获取到组件实例,可以使用子组件的所有方法。
使用:
// this.$ref.xxx.方法名()
// 父组件
<contact-info ref="contactInfo"/>
import ContactInfo from './ContactInfo'
components: { ContactInfo },
mounted() {this.$refs.contactInfo.initVal(data) // 调用子组件方法
}
// 子组件
methods: {initVal(data){Object.keys(this.contactInfo).forEach(val=>{this.contactInfo[val] = data[val]})}
}
3.利用v-for和ref组合获取一组dom节点
在通过v-for 遍历获取一组ref时记得加:,即:ref=“xxx”
当v-for用于元素或者组件的时候,引用信息将是包含dom节点或者组件实例的数组
。
加冒号说明后面是一个变量或者是表达式
,不加冒号后面就是字符串常量。
ref使用过程中需要注意的点:
1.获取ref要确保在dom已经渲染完成,比如可以在vue生命周期的mounted() {}钩子函数中调用,或者可以在this.$nextTick(() => {})
中调用。
2.在页面初始渲染的时候是不能访问ref的
,因为此时ref还不存在, $ref也不是响应式的
,不能在模板中做数据绑定。
3.在vue中用ref来获取dom的时候,可能会出现this. $refs.xxx 为undefined
的情况
(1)场景一:在created()中使用
在这个生命周期中进行数据观测、属性和方法的运算,watch事件回调,但是此时dom还没有渲染完成,是不能通过ref调用dom的。
解决在mounted中调用或者使用nextTick
。
(2)场景二:父元素或者当前元素使用了v-if或者v-show
因为 $ref不是响应式的
,只在组件渲染完之后才会生效,在初始渲染的时候是不存在的
因为是非响应式的,所有动态加载的模板更新它都无法相应的变化
解决:通过setTimeout(() => {…}, 0)来实现
$el: 获取Vue组件实例挂载的DOM元素
$el读取的是组件实例挂载的dom元素
// 子组件
<template><div>测试</div>
</template>
<script>
export default {name: 'TestComs'
};
</script>
// 父组件<test ref="testCom" /><div ref="test">11</div>mounted() {console.log(this.$refs.testCom, '组件ref'); // 获取组件实例console.log(this.$refs.testCom.$el, '组件el'); // 获取组件实例的dom元素console.log(this.$refs.test, '元素ref'); // 获取dom元素console.log(this.$refs.test.$el, '元素el'); // $el用于vue组件,普通dom元素不能用},
结果如下图:
VUE中$refs和$el的使用详解相关推荐
- vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
- 移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除 保存 Canvas画板 var draw; v ...
- JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- vue 生命周期的11中方法详解
vue 生命周期的十一中方法详解 vue 生命周期的定义 vue实例 从创建到销毁,也就是说从创建 -> 初始化 数据-> 编译模版 -> 挂载Dom -> 渲染 更新 -&g ...
- Spring EL表达式使用详解
Spring EL表达式使用详解 什么是Spring EL表达式 注入字面值 注入操作系统(OS)的属性 注入properties配置文件中数据 Bean属性调用 Bean方法调用 T运算符 构造器 ...
- vue的父子组件之间的通信详解
vue的父子组件之间的通信详解 一.父组件给子组件传值 父组件引入子组件,并对子组件进行监听 <!-- 父组件 --><template><div><h1&g ...
- VUE中$refs和$el的使用
ref: 给元素或者子组件注册引用信息 ref有三种用法: 1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素. <div ref="system" ...
- 【Vue】Vue-cli(脚手架)的目录结构详解(转载)
一.图简单说明下各个目录都是干嘛的: 总体框架:一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 四.文件结构细分 1.b ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
最新文章
- 贾扬清、Alex Smola、Julia创始人等大咖齐聚,WAIC开发者日共话AI未来
- 米家扩展程序初始化超时_28条规范和建议,教你如何设计出一套完美的PLC程序...
- C#面向对象(一):明确几个简单的概念作为开胃菜
- feign 序列化_Spring Cloud Feign 配置 FastJson
- 用于Spring JPA2后端的REST CXF
- Linux 应用程序的源码包如何安装?
- 第十一届蓝桥杯青少组Python竞赛真题
- Matlab之eval函数
- 最详细 Spring Boot 入门(-)
- 软件开发应用分层、每层的作用及各层之间调用关系
- 在线代码图片生成工具carbon
- Hive窗口分析函数(案例详细讲解)
- 数学知识在计算机专业的运用,数学在计算机科学及应用中的作用分析
- WinForm大型企业ERP系统
- html插入图片用px为单位,怎样把PPT尺寸的单位设置为px像素
- Grafana 6.7的sqlite3数据库报错“database is locked”的修复方法
- Windows Server 2008 WIA服务需要安装“桌面体验”
- Java并发编程的艺术(推荐指数:☆☆☆☆☆☆)
- H5 可视化构建工具原理解析(一)
- bootstrap开发tab选项卡事例
热门文章
- 索骥馆-编程语言之《程序语言的奥妙:算法解读(四色全彩)》扫描版[PDF]
- SQL注入学习详细过程
- tensorflow中tf.nn.xw_plus_b
- Mycat 1.6日志分类-Sequoia数据库相关日志
- 主成分分析 (一): 基本思想与主成分估计方法
- python批量下载数据|工具箱
- 单片机初学者电路常识
- 地热井监测控制系统解决方案
- cadence学习笔记 从ultra librarain网站下载封装并生成封装文件
- 上海高中计算机知识点总结,上海高中高考数学知识点总结(大全)