下面我就为大家分享一篇vue.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。
Vue.js使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记：
登录后复制登录后复制
这不过是以下示例的语法糖：
登录后复制登录后复制
所以在组件中使用时，它相当于下面的简写：
立即学习“前端免费学习笔记（深入）”；
登录后复制
所以要让组件的 v-model 生效，它应该 (从 2.2.0 起是可配置的)：
接受一个 value prop
在有新的值时触发 input 事件并将新值作为参数
我们来看一个非常简单的货币输入的自定义控件：–在父组件中引用子组件模板时用绑定v-model数据：
登录后复制
Vue.component('currency-input', { template: ' $ ', 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 }, // ...})
登录后复制
登录后复制
上述代码等价于：
{ foo = val }" value="some value">
登录后复制
注意你仍然需要显式声明 checked 这个 prop。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
浅谈React高阶组件
vue-cli axios请求方式及跨域处理问题
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
以上就是Vue.js自定义事件的表单输入组件方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752762.html
