Vue2的ref引用对象

ref

ref引用

用来在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()
	})
}

ref引用组件

在父组件中使用ref引用子组件获得子组件的vue实例从而调用子组件vue实例中的方法

可以修改组件的状态或调用组件的方法