Vue.js中$refs{}如何获取DOM元素
作者：Yvonne.Y
这篇文章主要介绍了Vue.js中$refs{}如何获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
如果我们想获取DOM元素，一般使用js中的document.querySelector来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs{}
$refs{}----获取标签元素
说明：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例
作用：减少DOM操作
用法：
原生方法
此例是利用原生jsdocument.getElementById()获取元素
<div id="app">
<input type="button" value="获取元素" @click='btn'>
<h3 id="myh3">哈哈, 今天天气不错</h3>
</div>
<script>
var vm= new Vue({
el:'#app',
data:{},
methods: {
btn(){
console.log(document.getElementById('myh3').innerText);
}
}
})
console.log(vm);
</script>
效果如下：
我们将vm实例输出，查看这个对象
vm.$refs方法获取
1.给元素定义ref=",输出vm实例
<h3 id="myh3" ref="myh3">哈哈, 今天天气不错</h3>
2.在实例的方法中输出，
获取元素方法如下：
console.log(this.$refs.myh3);
获取内容方法如下：
console.log(this.$refs.myh3.innertext); //或者 console.log(this.$refs.myh3.innerHtml);
$refs{}----获取Vue组件
查看vm实例：
<div id="app">
<input type="button" value="获取元素" @click='btn'>
<login ref='mylogin'></login>
</div>
<script>
var login={
template:'<h1>登录组件</h1>',
data() {
return {
msg:'son msg'
}
},
methods: {
show(){
console.log('调用了子组件的方法');
}
},
}
var vm= new Vue({
el:'#app',
data:{},
methods: {
btn(){
}
},
components:{
login
}
})
console.log(vm);
</script>
利用$refs获取子组件的方法：
console.log(this.$refs.mylogin);
利用$refs获取子组件内容的方法：
this.$refs.mylogin.show();
利用$refs获取子组件中的data：
console.log(this.$refs.mylogin.msg);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。