vue中input的v-model清空操作

问题来源

写input组件的时候需求一个清空按钮，但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值，也会带来开发的问题。

解决

v-model 完成大部分数据双向绑定

<input type=\"text\" :value=\"inputValue\"
      @change=\"$emit(\'change\',$event.target.value)\"
      @blur=\"$emit(\'blur\',$event.target.value)\"
      @focus=\"$emit(\'focus\',$event.target.value)\"
      @input =\"$emit(\'input\',$event.target.value)\"
  >

四个事件将input的事件传递，在父级使用

<g-input v-model=\"num\"></g-input>

但是在清空操作上出现难题,因为无论怎么操作都无法触发vue上的数据驱动，简单清空子组件上的维护的数据是没有同步到父级上的，这里无疑最佳方案就是单向的数据流，让子组件发生事件时通知父级，父元素传值发生改变，进而改变子组件。不过感觉这样做就违背使用v-model的初衷，但是也没有办法了

对要进行监听的dom绑定事件

子组件中：

<div @click=\"clear\">
   <g-icon></g-icon>
</div>

将需要清空数据的消息告诉父级

clear(){
   this.$emit(\'inputclear\',{clear:\'\'})
  }

以上两种可以合并成

<div @click=\"$emit(\'inputclear\',{clear:\'\'})\">
   <g-icon v-if=\"isClearShow\" icon=\"error\" class=\"clearForInput\" ></g-icon>
</div>

父级中：

<g-input v-model=\"num\" @inputclear=\"num = $event.clear\"></g-input>

现在就可以了

以上所述是小编给大家介绍的vue中input的v-model清空操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！