使用 v-bind 和 v-on 代替 v-model vuejs

Question

我使用 v-model 来处理表单中的输入，我必须将其更改为绑定 props 值，首先输入就像

<input type="text" class="form-control" placeholder="" v-model="username">

现在看起来像

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData即将到来的道具。它有username。

当使用模型时，在 中data，我定义了

data: () => {
  return {
    username: ""
  }
},

它工作正常，但将其更改为v-bindand后v-on，

username我的问题是我现在如何获得方法中的值？和过去一样，我得到它是为了this.username获取值并清除它，但现在我如何获取用户名

methods: {}

我有一个保存输入的按钮

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

当validateFormAndSave接到电话时我this.username现在可以得到我无法获得的价值？但是 Vue 文档说v-model和v-bind:value&v-on:input是一样的吗？

更新：

用户名中可以有也不能有某个值，因为它已填充了props值，所以v-on:input="username = $event.target.value"不要获取已写入的值，而是获取您输入的唯一新值？或编辑它？为什么会这样呢？有没有什么方法可以获取任何人在那里输入或已经输入的内容？

更新：

这变得非常模糊。所以现在。1.我可以设置v-bind:value，但是如果不编辑它就无法在方法中获取它。2. 我无法设置 this.username = "" 并且它也不会从输入中删除。3. @input 只获取你新输入的内容，而不获取已经存在的内容

Answer 1

v-model只是 => 的语法糖

<input :value="modelValue" @input="modelValue = $event.target.value"/>

如果您想要其他东西，也很容易做到。只需将更新侧更改为onInput：

<input  
    class="form-control"
    :value="username" 
    @input="username = $event.target.value"
>

然后

data: () => {
  return {
    username: ""
  }
},
mounted() 
{ 
  this.username = this.modelData.username;
},
methods:{
  consoleUsername() {
    console.log(this.username);
  }
}