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中$refs和$el的使用详解
ref: 给元素或者子组件注册引用信息 ref有三种用法: 1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素. <div ref="system" ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
Vue中$refs的理解
Vue中$refs的理解 $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例. 描述 ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象 ...
2021-06-26 Vue中关与el挂载点的学习
Vue中关与el挂载点的学习目录 Vue中关与el挂载点的学习 el的基本概念 Vue实例的作用范围是什么是否可以使用其他的选择器是否可以设置其他的dom元素 el的基本概念通过css选择器实 ...
浅谈关于quill在vue中的使用
根据公司项目要求使用富文本进行一些列功能实现这里使用quill.js实现插入与替换功能 quill.js官方api文档链接:Quill官方中文文档 · 看云一,通过npm命令安装 npm inst ...
vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template><div id="app"><input type="button&q ...
vue实例属性之el，template，render
一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先 ...
vue中refs的使用
最近在看其他项目的过程中,发现在dom节点上使用了ref="xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目. 这两天项目不忙了,有闲心来看别人做的项目了,就看 ...
（5）vue.js 基础语法—el选项
一.el选项介绍 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标. • 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素. • 代表 MVVM 中的 View 层(视图 ...

VUE中$refs和$el的使用

VUE中$refs和$el的使用相关推荐

最新文章

热门文章