Vue中通过this.$refs来获取DOM或者组件报错

1.关于this.$refs的使用场景
如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素

<p ref="p">hello</p>
<!-- this.$refs.p 指向该DOM元素 -->

如果ref属性加在组件上，那么this.$refs.name指向该组件实例

<child-component ref="child"></child-component>
<!-- this.$refs.child 指向该组件 -->

2.为什么有时候通过this.$refs.name来获取会报错？
一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误
因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！
如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取

this.$nextTick(() => {
	this.$refs.name... //DOM渲染完毕后就能正常获取了
})