ref

ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是Vue实例上，注册后的引用信息都会呈现在父组件Vue实例的$.refs上，这时，我们就可以通过 $.refs获取到引用的 DOM对象或是子组件信息。

在使用 JS/Jquery 获取页面的DOM 元素时，我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM元素。嗯，可以说，我们很难抛弃Jquery的一个重大原因，就是当我们需要获取到页面上的 DOM元素时，使用Jquery的 API相比于原生的 JS 代码，简单到极致。

那么，难道我们在 Vue 中获取 DOM元素还是采用这样的方式？ 答案当然是否定的，这种直接操纵 DOM元素的方式，与我们使用 Vue的初衷不符，虽然能达成效果，但是却不提倡，这里我们就可以使用 ref来获取页面上的DOM元素。

<div class="dep-active" ref="depActive">
      <!-- 业务中心活跃度top10 -->
</div>

var myChart = this.$echarts.init(this.$refs.depActive)
//直接可以用this.$refs的方式获取ref所在dom位置。

因为 Vue 采用 Virtual DOM 的做法渲染网页，如果我们直接操作 DOM，很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题，而通过使用 ref 属性之后，在一些需要获取 DOM 元素的情况下，我们就可以很方便的获取 DOM 元素。当然，当我们决定在项目中使用 Vue，还是需要转变我们的思路，将操作 DOM 转变成操作数据。同样的，通过将 ref 属性添加到子组件上，我们就可以很轻松的获取到子组件的相关信息，这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

用ref调用子组件的值和方法

子组件

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>
父组件

<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() {
      this.$refs.hello.open();
    }
  }
};
</script>

调用子组件的值同理