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
"_blank" href="https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model" rel="external nofollow" >自定义组件的 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。
以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。