xwjie/VueStudyNote

19 实现双向数据绑定

xwjie opened this issue · 0 comments

xwjie commented

先看vue的说明自定义组件在使用 v-model 时定制 prop 和 event

自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。要牢记:

<input v-model="something">
这不过是以下示例的语法糖:

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

所以在组件中使用时,它相当于下面的简写:

<custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>

所以要让组件的 v-model 生效,它应该 (从 2.2.0 起是可配置的):

接受一个 value prop
在有新的值时触发 input 事件并将新值作为参数

下面这种分开写的方式,默认当前功能已经支持。

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

下面需要支持v-model