2-12-ref引用

一、ref的作用

jQuery简化了程序员操作DOM的过程

而vue直接省略掉操作DOM的过程，程序员只要操作数据，vue在后台便能自动修改DOM结构，这就是所谓的数据操作视图。

因此在vue中，已经没必要引入jQuery，直接使用ref就可以直接访问DOM结构。

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

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

二、如何使用ref

在元素中定义ref属性，然后在methods中，通过this.$refs引入。

示例：

在Template中。

<h1 ref='myh1'>App 根组件</h1>

<button @click="changecolor">修改颜色</button>

在vue中。

<script>

export default {

methods: {

changecolor() {

this.$refs.myh1.style.color = 'red';

}

}

}

</script>

注意：refs甚至可以查找到子组件的方法和数据。

三、this.$nextTick的应用场景

在Template中

<input type="text" ref="mytext" v-show="inputVisible"
@blur="hideInput">

<button v-show="!inputVisible"
@click="showInput">显示输入框</button>

在script中

<script>

export default {

data() {

return {

inputVisible: false

}

},

methods: {

showInput() {

this.inputVisible = true;

this.$refs.mytext.focus();

},

hideInput() {

this.inputVisible = false;

}

}

}

</script>

此时点击按钮会显示输入框，失焦的时候隐藏输入框。

不过在showInput还专门focus了输入框，但是此时输入框尚未渲染到浏览器，因此无法聚焦到输入框上。

想要解决这个问题，就轮到nextTick出场。

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

this.$nextTick(() => {

this.$refs.mytext.focus();

})

另外一种做法是在updated中对焦

updated() {

if (this.inputVisible) {

this.$refs.mytext.focus();

}

}