Vue中的ref

ref
常用来辅助开发者，获取DOM元素或组件的引用，以及用于在父子组件中获取对方的某个元素进行取值，调用方
法等。
在每个Vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用
·默认情况下，组件的$refs指向一个空对象
·如果想要使用ref引用页面上的组件实例，则可以按照如下方式：
·使用ref属性，为对应的组件添加引用名称

1
2
3
4
5
6
7
8

<my-counter ref="counterRef"></my-counter>
<button@click="getRef">获取$refs引用</button:>
methods:
getRef(){
//通过this.$refs.引用的名称，可以引用组件的实例
console.log(this.$refs.counterRef)
//引用到组件的实例之后，就可以调用组件上的methods方法
this.$refs.counterRef.add()

这个方法可以说很便利，但是不要太依赖了，往往在不能通过其他方法获取的时候回才比较建议使用，毕竟我们因
该尽量减少添加，而是复用可以复用的部分。

$refs只会在组件渲染完成之后生效，并且不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”一你
应该避免在模板或计算属性中访问
tip:如果获取不到的时候，可以试一试使用nextTick