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>