ref引用

Vue中的ref引用

Vue中一个很大的优势就是不用操作DOM，只需要把数据维护好，但是如果想要在vue中拿到页面中某个DOM元素或者组件的引用就需要使用ref引用。

1. $refs

所以$开头的都是vue内置成员。

在每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或者组件的引用，默认组件的$refs指向一个空对象。

2. 使用ref引用DOM元素

• 为DOM元素添加ref属性，命名为引用名称
• 通过this就能操作这个对象了

3. 使用ref引用组件实例

• 为组件添加ref属性，命名为引用名称
• 通过this就能引用，可以调methods中的方法

---

---

4. this.$nextTick(callback)方法

4.1 背景

组件的$nextTick(callback)方法，会把callback回调函数推迟到下一个DOM更新周期之后再执行

也就是，等组件的DOM更新完成之后，再执行callback回调函数，从而保证callback可以操作到最新的DOM元素。

4.2 实例