Vue2:通过ref获取DOM元素

一、场景描述

我们在页面的开发过程中,经常需要操作dom元素,来实现我们需要的效果。

以往js中,我们是通过给dom添加id,然后,通过js代码document来获取这个dom

简写代码案例:

html 复制代码
<h2 id="test">这里是h2标签</h2>

<script>
	document.getElementById('test')
</script>

二、使用ref获取dom元素

1、ref加在html元素上

我们学习Vue之后,就不在使用这个方法来获取dom元素了。

一般,我们在Vue中,都是在vc中操作dom

所以,这个时候,我们使用ref属性来获取dom,从而实现操作效果。

简写代码案例:

html 复制代码
<h2 v-text="msg" ref="title"></h2>


<script>
	console.log(this.$refs.title);
</script>

效果展示:

2、ref加在vue组件上

简写代码案例:

html 复制代码
<School ref="sch"/>
<script>
	console.log(this.$refs.sch);
</script>

效果展示:

3、直接输出$refs

html 复制代码
<h2 v-text="msg" ref="title"></h2>
<button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
<School ref="sch"/>

<script>
	console.log(this.$refs);
</script>

效果展示:

三、总结

  1. 被用来给元素或子组件注册引用信息(id的替代者)
  2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  3. 使用方式:
    1. 打标识:<h1 ref="xxx">.....</h1><School ref="xxx"></School>
    2. 获取:this.$refs.xxx

这对后面学习组件间通信非常有用!

四、完整代码

html 复制代码
<template>
    <div>
        <h2 v-text="msg" ref="title"></h2>
        <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
    //App组件是汇总所有的组件的组件,所以,这里需要引入所有的它直接管理的子组件
    //引入School组件
    import School from './components/School'
    export default {
        name: "App",
        components:{School},
        data() {
            return {
                msg:"欢迎学习Vue!"
            }
        },
        methods:{
            showDOM(){
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象(vc)
            }
        }
    }
</script>
相关推荐
独立开阀者_FwtCoder几秒前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士几秒前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明几秒前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金920145 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius7 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku8 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿8 分钟前
Js事件循环
javascript
datagear9 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
蛋黄蛋黄12 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙13 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端