【前端】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的到的模版解析器解析后得到的标签元素。