Vue中ref和$refs的介绍与使用

之前没怎么注意 ref 的使用。后来一次结合 for 循环使用。才发现 ref 的使用细节满满。于是就总结了一下。

ref作用

用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。

1、如果给普通的dom元素使用，引用指向的是dom元素。

2、如果是给子组件使用，引用指向的是子组件的实例。

注意：

1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。

2、微信小程序中给dom元素使用ref无效。得到的是 空对象.

<text ref="nullRef"></text>

console.log("this.$refs.nullRef:",this.$refs.nullRef)

this.$refs.nullRef: undefined

ref优点

1、ref是vue里的方法，更加安全，不会依赖class或者id的样式变了而影响布局。

2、vue的主要目的是减少dom的操作。减少dom节点的消耗。

ref使用

ref根据使用场景不同，this.$refs 得到的对象类型不同。

// 1、ref 简单引用
<aaa ref="viewRef"></aaa>
// 2、ref + for
<view v-for="(item,index) in 2">
  <aaa ref="list1Ref"></aaa>
</view>
// 3、ref + for + v-show
<view v-for="(item,index) in 2">
  <aaa ref="list2Ref" v-show="index === 1"></aaa>
</view>
// 4、ref + for + v-if
<view v-for="(item,index) in 2">
  <aaa ref="list3Ref" v-if="index === 1"></aaa>
</view>

console.log("this.$refs:",this.$refs)

总结：

1、ref 简单引用：this.$refs.nameRef 返回的是 VueComponent 对象。

2、ref + for：this.$refs.nameRef 返回的是 数组 对象。

3、ref + for + v-show：返回多个数组数据（有多个）。

4、ref + for + v-if：返回当前显示对象的数组（一直只有一个）。