Vue.js自定义事件的表单输入组件方法

Vue.js使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件，使用 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 事件并将新值作为参数

我们来看一个非常简单的货币输入的自定义控件：--在父组件中引用子组件模板时用绑定v-model数据：

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
template: '\
 <span>\
  $\
  <input\
   ref="input"\
   v-bind:value="value"\
   v-on:input="updateValue($event.target.value)"\
  >\
 </span>\
',
props: ['value'],
methods: {
 // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
 updateValue: function (value) {
  var formattedValue = value
   // 删除两侧的空格符
   .trim()
   // 保留 2 位小数
   .slice(
    0,
    value.indexOf('.') === -1
     ? value.length
     : value.indexOf('.') + 3
   )
  // 如果值尚不合规，则手动覆盖为合规的值
  if (formattedValue !== value) {
   this.$refs.input.value = formattedValue
  }
  // 通过 input 事件带出数值
  this.$emit('input', Number(formattedValue))
 }
}
})

自定义组件的 v-model

2.2.0 新增

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

Vue.component('my-checkbox', {
model: {
 prop: 'checked',
 event: 'change'
},
props: {
 checked: Boolean,
 // 这样就允许拿 `value` 这个 prop 做其它事了
 value: String
},
// ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于：

<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>

注意你仍然需要显式声明 checked 这个 prop。

来源：http://blog.csdn.net/xiechengjian/article/details/78982604