Vue教程(ref和$refs的使用)
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容
ref
ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。
$refs
$refs 是一个对象，持有已注册过 ref 的所有的子组件。
具体演示
1.基础代码
先来准备案例基础代码，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>2.普通DOM
2.1 普通方式
我们先通过 getElementById 方法来获取
在这里插入图片描述
效果
在这里插入图片描述
2.2 ref使用
接下来我们通过 ref 属性来试试。
在这里插入图片描述
然后查看 vm 实例对象
在这里插入图片描述
通过上面的演示我们发现 在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象
在这里插入图片描述
效果
在这里插入图片描述
3.组件
ref 也可以作用在组件中，我们来看下效果
3.1 添加组件
先来添加一个自定义的组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
3.2 ref 使用
在 子组件中使用 ref属性，会将子组件添加到父组件的$refs对象中，如下
在这里插入图片描述
查看vm对象
在这里插入图片描述
通过 vm 实例查看 发现 $refs中绑定的有 我们的login组件，而且还看到了对应的 组件中的 msg属性和 show方法，那这样我们可以调用了，如下
在这里插入图片描述
在这里插入图片描述
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取h3的值" @click="getElement()">
<h3 id="myh3" ref="myh3" >我是一个h3</h3>
<hr>
<login ref='mylogin'></login>
</div>
<script>
var login = {
template: "<h3>我是login子组件</h3>",
data(){
return {
msg: "ok"
}
},
methods:{
show(){
console.log("show方法执行了...")
}
}
}
var vm = new Vue({
el: "#app",
data: {},
methods: {
getElement(){
// 通过 getElementById 方式获取 DOM 对象
// console.log(document.getElementById("myh3").innerHTML)
// console.log(this.$refs.myh3.innerHTML)
console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components:{
login
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年08月02日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读