用 ref 訪問 Vue.js 程序中的 DOM

做者：Nwose Lotanna

翻譯：瘋狂的技術宅

原文：blog.logrocket.com/how-to-use-…

未經容許嚴禁轉載

在本文中，你將瞭解如何在 Vue.js 中引用組件中的 HTML 元素。

前提條件

本文適用於全部使用 Vue 的開發人， 包括初學者。在閱讀本文以前，你應該具有一些前提條件：

• Node.js 10.x或更高版本。在終端或命令提示符下運行 node -v 來驗證你的版本
• npm 6.7 或以上版本
• 代碼編輯器；我強烈推薦 Visual Studio Code
• 把最新版本的 Vue 全局安裝在你的機器上
• 在你的計算機上安裝 Vue CLI 3.0。首先用 npm uninstall -g vue-cli 卸載舊的 CLI 版本，而後用 npm install -g @vue/cli 安裝新版本。
• 下載 Vue 入門項目（地址：github.com/viclotana/v…
• 解壓縮下載的項目，切換到它所作的目錄並運行 npm install 以使全部依賴項保持最新

什麼是 ref？

Ref 是 Vue 的實例屬性，用於在應用程序模板中註冊或指示對 HTML 元素或子元素的引用。

若是將 ref 屬性添加到 Vue 模板中的 HTML 元素，那麼就能夠在 Vue 實例中引用該元素甚至子元素。你也能夠直接訪問 DOM 元素，它是一個只讀屬性並返回一個對象。

爲何 ref 很重要？

ref 屬性對於經過在父 $ref 屬性中做爲鍵來選擇包含它的 DOM 元素是相當重要的。例如在 input 元素中放置 ref 屬性會將父 DOM 節點公開爲 this.$refs.input，也能夠用 this.refs["input"] 的形式。

經過在特定元素的引用上定義方法，能夠輕鬆地操縱 DOM 元素。一個典型的例子是用 this 將焦點添加到輸入元素上：

this.$refs["input"].focus()
複製代碼

經過這種方式，refs 的使用方法以像 JavaScript 中的 document.querySelector('.element') 或 jQuery 中的$('.element') 同樣。能夠在 Vue.js 實例內部和外部訪問 $refs。可是它們並非數據屬性，所以它們沒有響應性。

在瀏覽器中進行模板檢查時，它們根本不顯示，由於它不是 HTML 屬性，只是一個 Vue 模板屬性。

Demo

若是你從一開始就關注了這篇文章，如今應該已經下載了 Vue 入門項目並在 VS Code 上打開了它。打開 components 文件夾並將下面的代碼複製到 test.vue 文件中：

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    submit(){
      this.counter++;
      console.log(this.ref)
    }
  }
}
</script>
複製代碼

如今用如下命令在開發服務器中運行它：

npm run serve
複製代碼

你將看到用戶界面會顯示一個簡單的計數器，該計數器在單擊時會被更新，可是當你在瀏覽器中打開開發人員工具時，你會注意到它沒有記錄日誌。

正確的使用語法很是重要，由於這意味着 Vue 不會將此視爲錯誤，的確如此。根據咱們已經知道的關於 Vue refs的內容，它們會返回一個對象，可是根據未定義的響應來判斷，有些東西是錯誤的。將下面的代碼複製到 test.vue 文件中：

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script> export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } } </script>
複製代碼

當你運行並檢查它時，你會發現如今返回了一個對象：

快速查看代碼塊將揭示正確的語法：在模板中它被稱爲 ref，可是當咱們在 Vue 實例中引用它時，它被稱爲 $refs。當不返回 undefined時，這提示是很是重要的。你能夠訪問引用元素的每一個可能的屬性，包括模板中的元素。

接下來記錄一些咱們可能感興趣的屬性。如今你的 test.vue 文件的內容應該是：

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script> export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } } </script>
<style scoped> p , input, button{ font-size: 30px; } input, button{ font-size: 20px; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
複製代碼

在你的瀏覽器上應以下所示：

顯示元素

要顯示 DOM 中的 HTML 元素，請進入 submit 方法並將 methods 代碼更改成如下內容：

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input)
    }
  }
複製代碼

這裏的 input 是你以前在元素中建立的引用名稱（ ref="input"）。它能夠是你選擇的任何名稱。

顯示輸入的值

要顯示 HTML 元素的輸入值（在用戶界面的文本框中鍵入的字符串），進入 submit 方法並將代碼更改成：

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input.value)
    }
  }
複製代碼

這樣就顯示了你輸入的字符串，固然用 vanilla JavaScript 和 jQuery 也能夠實現相同的功能。

顯示元素的 URL

進入 submit 方法並將代碼更改成：

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input.baseURI)
    }
}
複製代碼

還有許多其餘能夠經過 ref 返回的對象信息。

條件處理

Vue.js 的 refs 也可用於輸出 DOM 元素內部的多個元素，例如使用 v-for 指令的條件語句。 refs 在調用時返回一個 item 數組，而不是對象。爲了說明這一點，可建立一個這樣的簡單列表：

<template>
  <div>
    <p v-for="car in 4" v-bind:key="car" ref="car"> I am car number {{car}}</p>
    <button @click="submit">View refs</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
    }
  },
  methods: {
    submit(){
      console.log(this.$refs)
    }
  }
}
</script>
複製代碼

當你在開發服務器中再次運行時，它將以下所示：

你能夠在 GitHub（github.com/viclotana/v…

結論

本文講解了怎樣在 Vue.js 中引用 DOM 中的 HTML 元素。你如今能夠訪問和記錄全部的元素，例如值，子節點，數據屬性，甚至它的 base URL。

另外咱們還學會了實現這一目標的方法。要注意要在 Vue 實例初始化而且渲染組件以後填充 refs，因此不鼓勵在計算屬性中使用 ref，由於它可以直接操做子節點。

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。