用来在vue中获取DOM元素或组件的引用
每一个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用
默认情况下,组件的$ref指向一个空对象
//使用ref属性为对应的'组件'添加引用名称 <Mycounter ref="counterRef"></Mycounter> <button @click="getRef">获取 $refs引用</button> methods: { getRef() { //通过this.$refs.引用的名称,可以引用组件的实例 console.log(this.$refs.counterRef); //引用到组件的实例之后,就可以调用组件上的methods方法 this.$refs.counterRef.add() } }
因为ref引用操作DOM元素,当数据发生变化(如v-if修改布尔值渲染元素),此时数据变化DOM结构还未渲染完,因此ref引用不能操作DOM元素
$nextTick()
组件中的$nextTick(cb)方法,会把cb回调推迟到下一个DOM更新周期之后执行
即等组件中的DOm更新完成之后,再执行回调函数,从而能使回调函数可以操作到最新的DOM元素
showInput(){ //切换布尔值使文本框显示出来 this.inputVisable = true //让展示出来的文本框自动获得焦点 this.$nextTick(() =>{ this.$refs.iptRef.focus() }) }