4.Vue2.0获取DOM元素或组件的ref和this.$nextTick(cb)方法

# ref引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

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

1. 使用 ref 引用DOM元素

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作:

元素内容

methods:{
    changeRef(){
        //通过 this.$refs.mydiv 即可获取到上面的div元素
        this.$refs.mydiv.style.color = 'red'
    }
}

2. 使用 ref 引用DOM元素

如果想要使用 ref 引用页面上的组件实例,如下操作：

# 组件的 this.$nextTick(cb) 方法

1. 作用

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

2. 案例说明

例如：在发表评论的时候，需要点击 发表按钮 才 显示输入框 。显示输入框 的同时需要获得焦点 和 隐藏按钮。如果 输入框失去焦点 的话，马上，隐藏输入框，显示按钮。注意：初始状态的按钮显示，输入框隐藏的。

分析：先用 ref 引用获得按钮和输入框，为按钮添加点击事件，事件函数中利用控制 v-if 和 v-else 的布尔值进而控制按钮和输入框的显示隐藏。

问题来了，当点击按钮的那一刻，输入框还不在页面，如何获得输入框的元素来操作输入框来获得焦点？那可以把获得焦点的方法定义在组件生命周期函数的updated()里面去吗？这里就要知道updated()函数并不是只在输入框显示完的时候被调用了，输入框隐藏的时候也是被调用的，隐藏了你还让输入框获得焦点，这行吗？显然不行！！

因此，这里需要用到 $nextTick(cb) 方法了，案例如下：