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


Posted in Javascript onMarch 08, 2018

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。

以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript 面向对象继承
Nov 26 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
layui之select的option叠加问题的解决方法
Mar 08 #Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 #Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 #Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python从入门到精通(DAY 1)
2015/12/20 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python3学生名片管理v2.0版
2018/11/29 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
性能服装:HYLETE
2018/08/14 全球购物
试述DBMS的主要功能
2016/11/13 面试题
服务型党组织建设典型材料
2014/05/07 职场文书
文艺演出策划方案
2014/06/07 职场文书
文明工地标语
2014/06/16 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年学前班工作总结
2014/12/08 职场文书
Python实现简繁体转换
2021/06/07 Python
深入详解JS函数的柯里化
2021/06/09 Javascript
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python