Vue中的$refs用于訪問組件或元素的引用。這個特性可以方便我們操作組件的DOM元素,例如在表單驗證中使用到的focus()方法。下面我們來看一下如何使用$refs focus實現表單驗證。
//在模板中加入表單元素//在方法中使用focus()方法實現表單驗證
methods: {
validateForm() {
if (this.$refs.input.value.length === 0) {
this.$refs.input.focus();
alert('請輸入內容');
} else {
alert('輸入成功');
}
}
}
在上面的代碼中,我們在模板中加入了一個文本框,并為其設置了一個引用名稱為"input"。在validateForm方法中,我們使用了$refs.input來訪問這個文本框的引用,并使用focus()方法使其獲取焦點。然后通過判斷文本框的值是否為空,完成了表單驗證的邏輯。
在實際開發中,我們可以根據具體的業務場景使用$refs focus方法來實現諸如表單驗證等功能。同時,需要注意的是,$refs focus方法只能在組件渲染完成后才能調用,因此需要在mounted()生命周期中使用。