VueStudyNote
VueStudyNote copied to clipboard
19 实现双向数据绑定
先看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