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

# ref引用

---

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

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

1. 使用 ref 引用DOM元素

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

查看代码

<!-- 使用 ref 属性，为对应的 DOM 添加 引用名称 -->
<div ref="mydiv">元素内容</div>

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

2. 使用 ref 引用DOM元素

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

查看代码

<!-- 使用 ref 属性，为对应组件添加 引用名称 -->
<Right ref="rightRef"></Right>

<script>
    //假如 组件Right 有一个 add() 的方法,则可以利用下面方法获取 add() 方法
    //实际上只要是获取其他组件的元素，都是先获得对应组件的实例在获取元素
    //this.$refs.rightRef 就代表 rightRef 这个组件的实例
    this.$refs.rightRef.add()
</script>

 

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

---

1. 作用

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

2. 案例说明

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

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

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

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

查看代码

<template>
  <div class="app-container">
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef" />
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制输入框和按钮的按需切换；
      // 默认值为 false，表示默认展示按钮，隐藏输入框
      inputVisible: false
    }
  },
  /* updated() {
    this.$refs.iptRef.focus()
  }, */
  methods: {
    // 点击按钮，展示输入框
    showInput() {
      // 1. 切换布尔值，把文本框展示出来
      this.inputVisible = true
      // 2. 令获取焦点的方法延迟执行
      this.$nextTick(() => {
        this.$refs.iptRef.focus()
      })
    },
    showButton() {
      this.inputVisible = false
    }
}
</script>