【前端】ref引用的作用

首先，我们要明确一点，使用vue的好处是：

1. 想要减少开发者直接操作dom元素。
2. 使用组件模版，实现代码的服用。

ref的属性的实现是为了取代原生js中使用id、class等标识来获取dom元素。
helloworld组件

<template><div class="hello"><h2>毕业院校：{{name}}</h2></div>
</template><script>
export default {name: 'HelloWorld',data(){return{name:'浙江理工大学',      }}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

app组件

<template><div id="app"><h1 ref="h1">简历</h1><button ref="btn" @click="printH1">开始</button><HelloWorld id="hello" ref="hello"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
//import SimpleResume from './components/SimpleResume.vue';export default {name: 'App',components: {HelloWorld},methods:{//打印根据ref取到的组件元素以及根据id获取到的组件元素printH1(){console.log(this);console.log(this.$refs.hello);console.log(document.getElementById('hello'));}}
}
</script>

App组件的打印结果，可以看到refs对象上有了三个子元素

helloword组件ref打印的结果以及id得到的结果

可以看到我们根据ref获取到的组件是组件对象，根据id的到的模版解析器解析后得到的标签元素。