有时你会发现需要直接访问一个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对象获取。