Vue中的input組件是用于表單輸入的基本組件之一。在實際開發中，我們經常需要對輸入框進行編輯，那么如何讓Vue中的input組件支持編輯呢？

<template>
<div>
<input v-model="message" />
<button @click="edit">編輯</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "hello"
}
},
methods: {
edit() {
this.$refs.input.focus() // 讓輸入框獲取焦點
this.$refs.input.select() // 選中輸入框內的文本
}
}
}
</script>

首先，在模板中，我們可以使用v-model指令將input組件與組件實例的message屬性進行雙向綁定。在data屬性中，我們初始化了message的初始值為"hello"。另外，我們還添加了一個按鈕，用于觸發編輯。

//...
methods: {
edit() {
this.$refs.input.focus()
this.$refs.input.select()
}
}
//...

在組件的methods選項中，我們定義了名為edit的方法。在該方法中，通過this.$refs.input可以獲取到input組件的DOM對象。接著，我們使用focus()方法將焦點放在輸入框中，再用select()方法將文本選中。這樣，當用戶點擊編輯按鈕時，輸入框內的文本會自動被選中，方便用戶直接修改內容。

綜上所述，通過上述方法，我們可以很方便地在Vue中實現input組件的編輯功能。