this.$refs ：用于操作真实的DOM节点。
在开发时碰到了一个小需求，需要子组件向父组件传参，而且是不需要通过事件传递的，一开始使用this.$emit()来写的，但是一直没有接受到参数，于是放弃了使用this.$emit()的使用。
于是，使用了在父组件中调用子组件的方法，来获取传递的参数。
一.关于this.$refs的使用场景
1.如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素
<p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 -->
2.如果ref属性加在组件上，那么this.$refs.name指向该组件实例
<child-component ref="child"></child-component> <!-- this.$refs.child 指向该组件 -->
3.如何利用v-for和ref获取一组数组或者dom节点。注意：如果通过v-for遍历想加不同的ref时，需要使用冒号。即 :ref = 某变量
<div :ref="'test'+t.code" v-for="t in classList" :key="t.code"></div>
在取值时怎么取？通过 this.$refs['test'+t.code]获取到的是一个数组
二.遇到的问题 ：为什么有时候通过this.$refs.name来获取会报错？
一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误
因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！
如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取
方法：
1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{ } ) 这里面实现，要不是找不到ref，原因是mouned（）之后，BOM节点还没有完全挂载上，于是找不到定义的ref。
2、可以直接在updata()的生命周期函数中使用，不用写this.$nextTick(()=>{ } )
3、在methods:{ } 方法中使用，也需要使用this.$nextTick(()=>{ } ) 等到页面完全渲染完毕之后在调用即可
标签：nextTick,vue,遇到,refs,获取,使用,组件,ref From： https://www.cnblogs.com/anna001/p/17884684.html