Vue.js组件中v-model的使用 | v-model用法
在Vue.js[1]中,经常会使用v-model[2]实现表单的双向数据绑定功能。使用Element组件时,组件库中的含有输出类型的自定义组件,都会使用v-model指令,该指令绑定的元素就是组件的输出结果。比如select选择器[3][4]平常只使用v-model做表单元素的数据绑定,没有仔细研究过这背后的原理,不是很理解自定义组件是怎么实现这个功能的。查找了一下相关资料,其实Vue.js[5]的官网上有教程有相关的资料。使用自定义事件的表单输入组件[6]v-model其实是一个语法糖,这背后其实做了两个操作v-bind绑定一个value属性v-on指令给当前元素绑定input...
在 Vue.js[1] 中,经常会使用 v-model[2] 实现表单的双向数据绑定功能。
使用 Element 组件时,组件库中的含有输出类型的自定义组件,都会使用v-model指令,该指令绑定的元素就是组件的输出结果。比如 select选择器[3][4]
平常只使用v-model做表单元素的数据绑定,没有仔细研究过这背后的原理,不是很理解自定义组件是怎么实现这个功能的。
查找了一下相关资料,其实 Vue.js[5] 的官网上有教程有相关的资料。
使用自定义事件的表单输入组件[6]
v-model 其实是一个语法糖,这背后其实做了两个操作
v-bind 绑定一个 value 属性
v-on 指令给当前元素绑定 input 事件
在原生表单元素中 <input v-model=something>就相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">当input接收到新的输入,就会触发input事件,将事件目标的value 值赋给绑定的元素
在自定义组件中 <my-component v-model=something></my-componment>相当于
<my-component v-bind:value=something v-on:input=something = arguments[0]></my-component>这时候,something接受的值就是input是事件的回掉函数的第一个参数所以在自定义的组件当中,要实现数据绑定,还需要使用[$emit]去触发input的事件。
this.$emit(input, value)阅读 15.1k更新于 2017-05-20 ...