ref$refs$el区别

作者:神秘网友 发布时间:2022-05-13 07:13:00

ref$refs$el区别

$refs 与 $el 是什么? 作用是什么? ref,$refs,$el ,三者之间的关系是什么?看本博主为您带来的最新文章,通过大量的列子来给你讲解,请带上你聪明的大脑,在这个过程中希望你可以举一反三。

ref (给元素或者子组件注册引用信息)就像你要给元素设置样式,就需要先给元素设定一个 class 一样,同理,你想获取哪个元素的 DOM,就给这个元素先设定一个 ref,其实这里和 JS 中的 document.各种方法获取 DOM 差不多,不过 ref 是访问 VUE 虚拟出来的DOM,这样可以有效的减少性能消耗

简述三者区别:

ref :是 元素的属性,用于设置在元素上

$refs :是 ref 的集合,集合里面包含了当前.vue中的所有 ref

用于获取普通元素中的 DOM 以及子组件中方法/参数的

$el :是 用于获取组件内 DOM(包括子组件,当前.vue组件,以及父组件)

目录

case 1:点击按钮“确定”触发其他元素上的事件

case 2:页面加载,获取当前.vue文件中整体元素高度

case 3:父组件,调用子组件内的方法/参数(这里的例子是页面加载直接调用)

case 4:什么情况/场景中使用this.$nextTick(()={}),它的作用是什么?


case 1:点击按钮“确定”触发其他元素上的事件template div class="content" div el-button type="success" @click="handleSubmit" 確定 /el-button !-- 设定 ref="passA" -- el-button ref="passA" type="success" @click="handlePassA" 被触发 A /el-button /div !-- 设定 ref="passB" -- div style="height:40px; width:100px; background: burlywood;" ref="passB" @click="handlePassB" 被触发 B /div /div/templatehandleSubmit(){ /* * 有同学看到这里会问:咦,博主,你这里写法为什么不同呀? * 嗯,这位同学不错,问到正题上了,避免了你在实际运用中出现问题 * 因为 ref="passA" 的按钮,它是 element ui 提供的组件, * 组件本身不是 DOM,所以需要 .$el 的帮助后才能提取组件的 DOM * 反之,对于提取普通元素上的 DOM ,就不需要了 */ this.$refs.passA.$el.click() this.$refs.passB.click() console.log(this.$refs)},handlePassA(){ console.log('我是 PassA, 我报触发了') console.log('我自己的高度 =',this.$refs.passA.$el.offsetHeight)},handlePassB(){ console.log('我是 PassB, 我报触发了') console.log('我自己的高度 =',this.$refs.passB.offsetHeight)},

ref$refs$el区别

case 2:页面加载,获取当前.vue文件中整体元素高度mounted(){ /* * 这里通过 this.$el 直接获取当前.vue文件整体 DOM */ console.log(this.$el) console.log('我是 当前.vue文件 整体的高度 =',this.$el.offsetHeight) console.log('我是 PassB 我自己的高度 =',this.$refs.passB.offsetHeight)},

ref$refs$el区别

这里通过 class=“content” 与上图中控制台输出的 整体DOM最外层的 calss 比照,可以更好的理解ref$refs$el区别

case 3:父组件,调用子组件内的方法/参数(这里的例子是页面加载直接调用)template div class="border" div我是子组件/div input v-model="value" /div/templatescript import {mapGetters} from 'vuex' export default { name: 'user-defined', data() { return { value: 0, list: [1,2,3,4] } }, methods: { handleAddNum(){ console.log('我是子组件里的方法') this.value = this.value + 1; // 获取父组件DOM let parentDom = this.$parent.$el; } }}/scriptstyle scoped lang="scss".border{ width: 300px; height: 200px; border: 1px solid red;}/styletemplate div class="content" div el-button type="success" @click="handleSubmit" 確定 /el-button !-- 设定 ref="passA" -- el-button ref="passA" type="success" @click="handlePassA" 被触发 A /el-button /div !-- 设定 ref="passB" -- div style="height:40px; width:100px; background: burlywood;" ref="passB" @click="handlePassB" 被触发 B /div !-- 子组件 设定 ref="userDefined" -- user-defined ref="userDefined"/user-defined /div/templatescriptimport userDefined from './user-defined.vue' // waves directiveimport {mapGetters} from 'vuex'export default { name: 'AdminPassword', components: { userDefined }, mounted(){ // 调用 子组件方法 this.$refs.userDefined.handleAddNum() // 调用 子组件list参数 console.log(this.$refs.userDefined.list) // 输出 $refs 内的集合 console.log(this.$refs) }, methods: { handleSubmit(){ this.$refs.passA.$el.click() this.$refs.passB.click() console.log(this.$refs) }, handlePassA(){ console.log('我是 PassA, 我报触发了') console.log('我自己的高度 =',this.$refs.passA.$el.offsetHeight) }, handlePassB(){ console.log('我是 PassB, 我报触发了') console.log('我自己的高度 =',this.$refs.passB.offsetHeight) }, }}/script

ref$refs$el区别

case 4:什么情况/场景中使用this.$nextTick(()={}),它的作用是什么?template div class="content" el-button type="success" @click="handleSubmit" 获取下方div中文本 /el-button !-- 设定 ref="myDiv" -- div ref="myDiv" style="width: 100px; height: 40px; border: 1px solid red;" {{text}} /div /div/templatedata(){ return{ text: '我今年12岁' }},methods: { handleSubmit(){ /* * 为什么我打印出来的不是 【我今年13岁】 呢? * 因为 DOM 的值还没有更新完毕,所以这里打印的依然是【我今年12岁】 */ this.text = '我今年13岁' console.log('打印 =',this.$refs.myDiv.innerHTML) // 打印结果:我今年12岁 }}

ref$refs$el区别

created(){ console.log('created =',this.$refs.myDiv) /* * 因为生命周期执行顺序的缘故,vue 实例刚刚创建完毕 , DOM 还没有进行渲染,所以 * 打印结果:created = undefined * 如果你在这里输出 this.$refs.myDiv.innerHTML 控制台还会报错,提示 myDiv 不存在 */ this.$nextTick(()={ console.log('created =',this.$refs.myDiv.innerHTML) /* * this.$nextTick 监视 DOM 的更新 * 会进入 红灯停状态,DOM 更新完毕后,就会进入 绿灯行驶状态 * 打印结果:created = 我今年12岁 */ })},methods: { handleSubmit(){ this.text = '我今年13岁' /* * this.$nextTick 的作用是什么? * 它的作用类似:前方道路正在施工,施工完毕后可正常行驶 * DOM 更新完毕后,就会执行 this.$nextTick 内的代码 */ this.$nextTick(()={ console.log('打印 =',this.$refs.myDiv.innerHTML) // 打印结果:我今年13岁 }) }}

ref$refs$el区别

喂,同学,不错呦,竟然全都看完了,加油!

想要看其他的 case,也可以通过评论或者私聊给我呦!

如果文章对你有帮忙,给博主加个关注,鼓励博主创造出更多的帖子!

ref$refs$el区别 相关文章

  1. ref和out关键字的用法和区别

    ref和out关键字的用法和区别 前言 ref和out关键字对于初学者来说,即用的少又难理解。看过多篇网上的ref和out博客后决定自己整理一份ref 和 out 关键字的用法和区别 ref 和 out 的用法 ref 和 out 最常见的用法:当需要一个方法返回...

  2. C#关键字out与ref的区别

    C#关键字out与ref的区别 问题:为什么C#中要有ref和out? 先看下面一段代码:想通过Exchange方法交换A、B两个变量的值,交换前A=10,B=20. static void Main(string[] args){ int A = 10; int B = 20; Exchange(A,B); Console.WriteLine($交换后,A为{A},B为{

  3. vue3中 ref和reactive使用上的区别

    ref和reactive使用上的区别(vue3 组合式api中) 在 vue3 中对 响应式数据 的声明官方给出了 ref() 和 reactive() 这两种方式 响应式数据:是指当数据改变后,Vue 会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后...

  4. Vue中的 ref 和 $refs

    Vue中的 ref 和 $refs ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想要在Vue中直...

  5. 关于refs/for/ 和refs/heads/

    关于refs/for/ 和refs/heads/ https://www.cnblogs.com/onelikeone/p/6857932.html 1. 这个不是git的规则,而是gerrit的规则, 2. Branches, remote-tracking branches, and tags等等都是对commite的引用(reference),引用都以 “refs/……”表示. 比如 remo

  6. Vue里ref($refs)的用法

    Vue里ref($refs)的用法 在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容 ref ?? ref 被用来给元素或子组件注册引用信息, 引用信息将会...

  7. git pull时报错error: cannot lock ref xxx: ref xxx is at (一个commitID) but expected的解决办法(unable to update local ref)

    一、错误描述 在执行git pull时候,报错如下: 二、问题产生原因: 原因是你这个git工程的.git/refs目录下跟踪的某些git分支,在git pull的时候,与远端的对应分支的refs对比发现不同,所以导致git pull报错。 通过命令 git branch -a 查...

  8. react中ref怎么用

    react中ref的使用方法:1、通过回调函数形式进行使用,代码如“export default class UserAdd extends Component{...}”;2、通过string形式进行使用,代码如“export...”。 推荐:《javascript基础教程》 该方法适用于所有品牌电脑。 react中ref的...

  9. 关于ref的一切

    关于ref的一切 作为 React 开发者,你能回答如下几个问题么? 为什么 string 类型的 ref prop 将会被废弃? function 类型的 ref prop 会在什么时机被调用? React.createRef 与 useRef 的返回值有什么不同? 其实,这三个问题中的 ref 包含两个...

  10. react中的refs是什么

    react中的refs是react支持的一种特殊属性,这个特殊属性允许我们引用render()返回的相应的支撑实例。这样我们就可以确保在任何时间总是拿到正确的实例。 环境: 本文适用于所有品牌的电脑。 (学习视频分享:react教程) 属性...

  11. 包含重复对象引用($ref)json解析

    包含重复对象引用($ref)json解析 情况如下图,正常解析,引用语法解析不出来,里面的值为null. 解决方案: CalculationDTO calculationDTO = JSON.parseObject(jsonStr, CalculationDTO.class, Feature.DisableSpecialKeyDetect); Feature.DisableSpecialKeyDetec

  12. react的ref的用法

    react的ref的用法 通过ref获取到input的dom元素,再通过value属性可以获取到input框的值 input ref={(input) = this.input = input} placeholder='请输入用户名'/input ref={(pwd) = this.pwd = pwd} placeholder='请输入密码' type='password'/button onClic

  13. 通过refs制作计数器

    通过refs制作计数器 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title通过refs制作计数器/title script src='./vue.js'/script/headbody div id=root counter @change=handleChange/counter counter @change=handleChange/counter div{{total}}/div /

  14. 在ref上加上下标

    在ref上加上下标 我上一篇的复选框和行点击的联动,那只是我页面中左边的表格,其实右边还有一个,俩表格都是在一个tab页下喜欢的,第二个表格的下标要是再写this.activeIndex会影响左边的,请教了同事才知道在ref上就可以加...

  15. React Ref 其实是这样的

    React Ref 其实是这样的 ref 的由来 在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式。要修改一个子组件,你需要使用新的 props 来重新渲染它。但是,在某些情况下,你需要在典型数据流之外强制修改子组件/元素...

  16. 【React】组件的三大属性之refs

    【React】组件的三大属性之refs 获取input输入框中的值 (分为两种情况): 1. 仅获取input输入框的值,该input不存在事件发生 handleClick() { // const input = this.refs.content // alert(input.value) const input = this.input.value alert(input)} 2.

  17. Windows 10如何启用ReFS弹性文件系统

    Windows 10如何启用ReFS弹性文件系统 责任编辑:editor005 | 2016-10-10 14:26:56 本文摘自:51CTO 自微软为 Windows 操作系统定制和设计 NTFS 文件系统之后,用户的数据存储需求还是发生的巨大变化。此后,微软于 2012 年便开始尝试在 Windows 8...

  18. React框架进阶-setState、ref、路由

    一、setState进阶 1.setState是一个异步函数 在执行this.setState时,后续的代码会马上执行 state = { num:100}numChange(){ var num = this.state.num; this.setState({ num:++num }); console.log(this.state.num)//此时获取到的数据不是最新的}render() {

  19. 解决FastJson中$ref 循环引用的问题

    解决FastJson中“$ref 循环引用”的问题 0、开发环境 SSH,EasyUI,MySQL 1、需求要求: (1)首先获取所有的贷款订单数据,即List LoanOrder。 (2)然后从单个贷款订单实体LoanOrder去访问贷款人实体Loaner的信息。 2、实体之间的关系描述 (1)Loa...

  20. vue基础之ref操作dom元素

    vue基础之ref操作dom元素 文章目录 前言 一.ref属性的使用 1.要给操作的元素设置ref属性 2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值} 3.代码示例 总结 前言 学习vue是如何操作dom元素 提示:以下是本篇文章正文内容,下面案...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词