VUE2语法中$refs和ref属性的使用方式
更新时间：2025年10月13日 11:26:36 作者：雾林小妖
在Vue中如何使用$refs和ref属性来操作DOM和组件实例,$refs是一个对象,包含由ref属性注册的DOM元素和组件实例,通过$refs可以在Vue中获取DOM节点、组件实例、组件数据和属性等
$refs和ref属性的使用
1、$refs:一个包含 DOM 元素和组件实例的对象，通过模板引用注册。
2、ref实际上获取元素的DOM节点
3、如果需要在Vue中操作DOM我们可以通过ref和$refs这两个来实现
总结：$refs可以获取被ref属性修饰的元素的相关信息。
$refs和ref使用-非组件环境
$refs f的使用至少需要写在mounted中，等待组件渲染结束，否则获取不到信息。
在下面的案例中，我们将template中的div加入属性ref=”comp2”,并打算在mounted中获取相关的DOM信息。
注意点：这是是没有使用组件的用法，后面有组件的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
//实例化vue实例
const { createApp } = Vue
const app=createApp({
mounted(){
},
template:`
<div>
<div ref="comp2" name="div111">hello vue</div>
</div>
`
});
//vue实例只作用于app这个DOM节点中
app.mount('#app');//viewModel是组件帮助我们完成的
</script>
</body>
</html>
获取名称为comp2的ref节点
核心代码：this.$refs.comp2
mounted(){
console.log(this.$refs.comp2)
},
获取名称为comp2节点中的值
核心代码：this.$refs.comp2.innerHTML
mounted(){
console.log(this.$refs.comp2)
console.log(this.$refs.comp2.innerHTML)
},
获取名称为comp2节点中属性的值
核心代码：this.$refs.comp2.attributes.name
mounted(){
console.log(this.$refs)
console.log(this.$refs.comp2.innerHTML)
//获取属性name的值
console.log(this.$refs.comp2.attributes.name)
},
$refs和ref使用-组件环境
在vue中定义了一个全局组件component2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
//实例化vue实例
const { createApp } = Vue
const app=createApp({
mounted(){
console.log(this.$refs)
console.log(this.$refs.comp2.innerHTML)
console.log(this.$refs.comp2.attributes.name)
},
template:`
<div>
< component2 ref="comp" > </component2>
</div>
`
});
//定义一个全局组件
app.component("component2",{
methods:{
event1(){
console.log("======1======");
}
},
data(){
return {
name:"晓春111"
}
},
template:`<div name="div111">hello vue111111111</div> `
});
//vue实例只作用于app这个DOM节点中
app.mount('#app');//viewModel是组件帮助我们完成的
</script>
</body>
</html>
获取到子组件comp的节点
核心代码：this.$refs.comp
mounted(){
console.log(this.$refs.comp)
},
获取到子组件comp的节点中定义的函数
核心代码：this.$refs.comp.event1
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
},
获取到子组件comp的节点data中定义的属性值
核心代码：this.$refs.comp.name
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
},
获取到子组件comp的节点中template的值
核心代码：this.$refs.comp.$el
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
},
获取到子组件comp的节点中template中元素属性的值
核心代码：this.$refs.comp.$el.attributes.name
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
},
获取到子组件comp的节点中template中元素的值
核心代码：this.$refs.comp.$el.innerHTML
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
},
获取到子组件comp的节点中template中元素的值
核心代码：this.$refs.comp.$data
$data能够获取我们定义在data中的参数。也就是
data(){
return {
name:"晓春111"
} }的值
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
console.log(this.$refs.comp.$data)
},
获取子组件comp中template自定义属性
核心代码：this.$refs.comp.$options
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
console.log(this.$refs.comp.$data)
console.log(this.$refs.comp.$options)
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用Vue.js开发微信小程序开源框架mpvue解析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Vue3 el-switch @change事件在初始化时会自动调用问题处理的多种方法
本文介绍Vue3中Switch切换确认弹窗的两种实现方法：方法一通过before-change拦截器精准控制（推荐）；方法二用初始化状态标识兼容旧项目,并提供统一封装方案,适用于ElementPlus/NaiveUI等组件,感兴趣的朋友一起看看吧2025-07-07
在Vue项目中配置postcss-preset-env的两种主流方案
在 Vue 项目中配置 postcss-preset-env,根据你使用的构建工具不同,配置方式也有所区别,以下是 Vue CLI (Webpack) 和 Vite 两种主流方案的详细配置,需要的朋友可以参考下2026-04-04
这篇文章主要介绍了Django+Vue跨域环境配置详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue-cli3使用 DllPlugin 实现预编译提升构建速度
这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue剔除数组指定位置元素的几种方法,文中主要介绍了单个去除和批量去除这两种方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue路由 重定向和别名的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
uniapp Vue3中如何解决web/H5网页浏览器跨域的问题
存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue2.0 事件的广播与接收(观察者模式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vue+Vant实现顶部搜索栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
最新评论