但是随着业务的增长，难免会访问到我们Vue组件的实例的一个情况。
1，比如我们使用echarts，业界很知名的一个统计可视化库，我们就很难免会涉及到获取组件实例的一个情况。
2，再比如，我们需要一个input节点，让它手动的去处于一个focus的状态，这时候我们依然需要去访问这个实例。

一、正常情况下使用this.$refs.xxx获取需要的DOM节点或组件实例。

基于这些情况，Vue预留了一个API，就是ref。通过this.ref.xxx，xxx就是我们给这个组件起的挂载在组件上的这个名字。

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

都可以通过this.refs.xxx来访问到这个实例，但是这里需要注意的一点是：


如果是原生DOM，比如p节点，我们获取到的就是真实DOM元素p，如果是自定义组件，我们获取到的就是这个组件的实例。

p元素的使用代码：

<template>
    <div>
        <p ref="p">hello world</p>
        <button @click="showPDOM">p的按钮</button>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
    methods: {
        showPDOM: function() {
            console.log(this.$refs.p);
        },
    }
}
</script>

自定义组件的使用：
父组件：

<template>
    <div>
        <p ref="p">hello world</p>
        <button @click="showPDOM">p的按钮</button>
        <child-component ref="child" v-on:showChild="consoleLog"></child-component>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
    components: {
        ChildComponent
    },
    methods: {
        showPDOM: function() {
            console.log(this.$refs.p);
        },
        consoleLog: function() {
            console.log(this.$refs.child)
        }
    }
}
</script>

子组件：

<template>
    <div>
        <button @click="$emit('showChild')">按钮</button>
    </div>
</template>

this.refs.xxx可以方便的获取到当前节点的上下文环境，如果说要获取跨层级组件的一个实例，那就很不方便了，如果获取父组件，通过parent.refs.xxx；如果获取子组件的，通过children.refs.xxx。如果层级多的时候，就不方便了。


通过递归的方式，一层一层的去找。比较繁琐。

二、使用ant-ref插件，唐金州老师开源项目。

熟悉react的朋友都知道，React中也提供了Ref（Reference引用）的API。实现方式是通过callback回调。

我现在要从A节点获取E节点的实例。

A节点设置一个钩子函数，E实例生成或者更新之后，主动去调用这个钩子函数，来通知A节点，我这个实例已经生成好了，或者我这个实例有更新，需要告诉这个A节点。
然后A节点将这个实例进行缓存就可以了。每次A节点需要访问的时候，总是能拿到最新的数据，因为E节点更新之后已经主动地告诉了A节点。

A节点源码：

provide() {
    return {
        setChildrenRef: (name, ref) => {
            this[name] = ref;   //把传递过来的ref进行缓存
        },
        getChildrenRef: name => {
            return this[name];  //或区域需要的name的ref
        },
        getRef: () => {
            return this;
        }
    }
},

子节点E的源码结构：

<template>
  <div class="border2">
    <h3 v-ant-ref="c => setChildrenRef('childrenE', c)">
      E 结点
    </h3>
  </div>
</template>
<script>
export default {
  components: {},
  inject: {
    setChildrenRef: {
      default: () => {}
    }
  }
};
</script>