1.获取页面中dom元素

        通过在元素标签中配置ref属性后，我们可以通过this.$refs.refname来获取dom元素

<template>
  <div id="app">
    <div ref="refname">123</div>
    <button @click="getTest">获取dom</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.refname)
    }
  }
};
</script>

2.获取子组件实例的数据或方法

        父组件（包含的子组件引用标签中加上ref属性)，这时给子组件标签使用ref，引用指向的就是子组件的实例；

<template>
  <div id="app">
    <test ref="test"/>
    <button @click="gettest">获取test组件中的值</button>
  </div>
</template>

<script>
import test from "./components/test.vue";

export default {
  components: {
    test
  },
  data() {
    return {}
  },
  methods: {
    gettest() {
      console.log(this.$refs.test.msg)
    }
  }
};
</script>

子组件

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello"
    }
  }
}
</script>

下面是vue指南中对于ref的介绍