Vue.js自定义事件的表单输入组件方法
Vue.js使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件,使用v-model来进行数据双向绑定。要牢记:
这不过是以下示例的语法糖:
所以在组件中使用时,它相当于下面的简写:
所以要让组件的v-model生效,它应该(从2.2.0起是可配置的):
接受一个valueprop
在有新的值时触发input事件并将新值作为参数
我们来看一个非常简单的货币输入的自定义控件:--在父组件中引用子组件模板时用绑定v-model数据:
Vue.component('currency-input',{
template:'\
\
$\
\
\
',
props:['value'],
methods:{
//不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
updateValue:function(value){
varformattedValue=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会使用valueprop和input事件。但是诸如单选框、复选框之类的输入类型可能把value用作了别的目的。model选项可以避免这样的冲突:
Vue.component('my-checkbox',{ model:{ prop:'checked', event:'change' }, props:{ checked:Boolean, //这样就允许拿`value`这个prop做其它事了 value:String }, //... })
上述代码等价于:
{foo=val}" value="somevalue">
注意你仍然需要显式声明checked这个prop。
以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。