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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
JavaScript流程控制(分支)
Dec 06 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python编程使用协程并发的优缺点
2018/09/20 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python logging模块handlers用法详解
2020/08/14 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
建材业务员岗位职责
2013/12/08 职场文书
初中中等生评语
2014/12/29 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js