一、若是用在html的dom上，则此方法与js原生方法document.querySelector(‘[ref=name]‘)类似，引用时：$refs(注意：这里有一个“s”)
<template>
<div id="app">
<input type="text" ref="inputValue">
<button @click="threeClick">点击</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
threeClick(){
this.$refs.inputValue.value = 3
}
}
};
</script>
上述例子中，点击后，框里会出现一个3
二、用于子组件时，类似于原生js的闭包，使父组件可以访问子组件的数据并加以操作
//子组件 <template> <div> <span>{{num}}</span> </div> </template> //父组件 <template> <div id="app"> <son ref="sonNum"></son> <button @click="add">add</button> </div> </template> <script> import son from "@/components/son" export default { name: "App", components:{ son }, methods: { add(){ this.$refs.sonNum.num += 3 } } }; </script>
上诉例子中，点击add按钮时，子组件内的num会加3
原文：https://www.cnblogs.com/bulici/p/11796744.html