refs 焦點管理

• ref
• • 使用ref
  • $nextTick()
• Vue 生命周期
• tabindex屬性

Vue refs來處理這個問題——這是一項高級功能，它允許您直接 訪問虛擬 DOM 下方的 底層 DOM 節點（設置焦點），或者從一個組件 直接訪問子組件的內部 DOM 結構。

ref

ref 被用來給元素或子組件注冊引用信息， 引用信息將會注冊在父組件的 $refs 對象上;
如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素；
如果是在子組件上，引用就指向組件的實例。

使用ref

使用 ref 時，您需要向要訪問的元素添加一個屬性，并為該屬性的值添加一個字符串標識符，必須唯一。
訪問與 ref 關聯的值，要使用 $refs 組件實例上提供的屬性。

$nextTick()

$nextTick() 這個方法接受一個回調函數，然后在 DOM 更新后執行。
在修改數據之后立即使用它，然后等待DOM更新。
也可以將代碼添加到生命周期中的 mounted 中。

focusOnEditButton() {this.$nextTick(() => {const editButtonRef = this.$refs.editButton;editButtonRef.focus();}); }

可以和v-if，配合用。

Vue 生命周期

vue方法的生命周期按觸發的順序排列如下：


生命周期方法是獨立存在的特殊方法，和 props 結構 data() 同一級別。不能在此處使用箭頭功能。我們需要訪問this來訪問 ref。
在生命周期 mounted 階段，是渲染了DOM后，在頁面刷新后調用內部代碼。

<input:id="id"type="text"autocomplete="off"ref="labelInput"v-model.lazy.trim="newLabel"/> mounted() {const labelInputRef = this.$refs.labelInput;labelInputRef.focus(); }

tabindex屬性

tabindex 屬性規定元素的 tab 鍵控制次序（當 tab 鍵用于導航時）。
用戶指定義的 tabindex 最好永遠小于 0
語法：

<element tabindex="number"> <h2 id="list-summary" ref="listSummary" tabindex="-1">{{listSummary}}</h2> deleteToDo(toDoId) {const itemIndex = this.ToDoItems.findIndex(item => item.id === toDoId);this.ToDoItems.splice(itemIndex, 1);this.$refs.listSummary.focus(); }

總結

以上是生活随笔為你收集整理的前端之refs焦点管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。