refs 焦點(diǎn)管理

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

Vue refs來(lái)處理這個(gè)問(wèn)題——這是一項(xiàng)高級(jí)功能，它允許您直接 訪問(wèn)虛擬 DOM 下方的 底層 DOM 節(jié)點(diǎn)（設(shè)置焦點(diǎn)），或者從一個(gè)組件 直接訪問(wèn)子組件的內(nèi)部 DOM 結(jié)構(gòu)。

ref

ref 被用來(lái)給元素或子組件注冊(cè)引用信息， 引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上;
如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素；
如果是在子組件上，引用就指向組件的實(shí)例。

使用ref

使用 ref 時(shí)，您需要向要訪問(wèn)的元素添加一個(gè)屬性，并為該屬性的值添加一個(gè)字符串標(biāo)識(shí)符，必須唯一。
訪問(wèn)與 ref 關(guān)聯(lián)的值，要使用 $refs 組件實(shí)例上提供的屬性。

$nextTick()

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

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

可以和v-if，配合用。

Vue 生命周期

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


生命周期方法是獨(dú)立存在的特殊方法，和 props 結(jié)構(gòu) data() 同一級(jí)別。不能在此處使用箭頭功能。我們需要訪問(wèn)this來(lái)訪問(wèn) ref。
在生命周期 mounted 階段，是渲染了DOM后，在頁(yè)面刷新后調(diào)用內(nèi)部代碼。

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

tabindex屬性

tabindex 屬性規(guī)定元素的 tab 鍵控制次序（當(dāng) tab 鍵用于導(dǎo)航時(shí)）。
用戶指定義的 tabindex 最好永遠(yuǎn)小于 0
語(yǔ)法：

<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(); }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。