一：定义

主要是通过ref进行dom操作和父子组件数据处理和调用

二：使用场景

1：获取dom元素 通过this.$refs，以及修改元素属性、值

 <div id='app'>
        <div ref="text">
            111
        </div>
    </div>
methods() {
                console.log(this.$refs);
}

2：获取子组件中的数据，通过this.$refs.hello.属性名

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

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

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

3：调用子组件中的方法，通过 this.$refs.绑定ref值.方法名

 methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }

三：总结：进来避免使用，容易导致数据流混乱，代码可读性差，组件混乱和不可重用