参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-16使用ref直接访问元素
有时你会发现需要直接访问一个DOM元素；也许你正在使用一个不支持Vue的第三方库，或者希望做一些Vue自身不能完全处理的事情。可以使用ref直接访问元素，而不需要使用querySelector或者其他选择DOM节点的原生方法。
使用ref访问一个元素，只需要将这个元素的ref属性设置为字符串，然后可以使用这个字符串访问元素：
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>使用ref直接访问元素title>
head>
<body>
<div id="app">
<input type="text" ref="ipt" id="ipt">
<button @click="add">vue获取button>
<button onclick="req()">js获取button>
div>
<script src="https://unpkg.com/vue">script>
<script>
let vue = new Vue({
el: "#app",
methods: {
add(){
console.log(this.$refs.ipt);
console.log(document.getElementById("ipt"));
}
}
})
function req(){
console.log(document.getElementById("ipt"));
console.log(vue.$refs.ipt);
}
script>
body>
html>
这样，在JavaScript中，这个元素会被注册在父组件的 $refs 对象上，对应的键名就是为元素的ref属性设置的值。在这个例子中，在vue对象中可以使用this.$ref.ipt访问这个元素。vue对象外部可以通过声明的vue对象获取。