Vue.js自定义事件的表单输入组件方法
2018-03-08 15:33
896 查看
自定义事件可以用来创建自定义的表单输入组件,使用 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。
以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用vue.js在页面内组件监听scroll事件的方法
- 浅谈Vue.js 组件中的v-on绑定自定义事件理解
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- Vue.js 组件中的v-on绑定自定义事件理解
- vue组件开发之用户无限添加自定义填写表单的方法
- 前端知识点整理之表单输入事件的兼容写法,js常用关键字,获取标签元素的写法
- Vue.js 中,7种定义组件模板的方法 | Codementor
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- Vue EventBus自定义组件事件传递
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- Vue-自定义事件之—— 子组件修改父组件的值
- vue学习第4天,表单输入绑定 组件
- vue--自定义全局方法,在组件里面使用
- js框架 dwz jui 的日历组件 添加自定义事件
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
- extjs6 基础组件扩展和自定义组件封装--04静态js方法的设计思想
- 【11】vue.js — 自定义键盘事件
- javascript(JS)常见的表单输入限制方法代码
- vue加载自定义的js文件方法
- 一个流行且实用的JS表单验证提示,演示了怎么自定义错误信息的显示方式,同时通过写FormValid.showError类方法来实现错误显示方式自定义: errMsg 是一个错误消息的数组,这样方便自定