Vue中的input組件是使用極廣的表單元素之一。在開發(fā)中，我們經(jīng)常需要控制input組件中的焦點，比如自動聚焦和手動聚焦等，那么接下來，我們就來了解一下Vue中如何控制input組件的焦點。

自動聚焦

<input v-auto-focus />
Vue.directive('auto-focus', {
inserted: function (el) {
el.focus()
}
})

在上面這段代碼中，我們定義了一個名為'auto-focus'的指令，并在使用input組件時使用了該指令，這樣就能在input組件被插入到DOM中后，自動將焦點聚焦到該組件上。具體來說，我們在指令的inserted鉤子函數(shù)中調用了原生的focus方法，將焦點聚焦到了該組件上。

手動聚焦

<template>
<div>
<input ref="input" />
<button @click="focusInput">聚焦input</button>
</div>
</template>
<script>
export default {
methods: {
focusInput () {
this.$refs.input.focus()
}
}
}
</script>

上述代碼中，我們在組件中使用了一個button，通過在button的click事件中調用input組件的focus方法，實現(xiàn)了手動聚焦。此外，我們還給input組件添加了一個引用，即ref="input"，這樣我們就能直接通過該引用訪問到input組件的DOM對象，從而調用其focus方法。

至此，我們已經(jīng)了解了如何在Vue中控制input組件的焦點了，希望對大家有所幫助。