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 new后的constructor属性
Aug 05 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jquery禁用右键示例
Apr 28 Javascript
javascript二维数组转置实例
Jan 22 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
js实现磁性吸附的示例
Oct 26 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
简单易用的计数器(数据库)
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php编程每天必学之表单验证
2016/03/01 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
python远程登录代码
2008/04/29 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
C#实现启动一个进程
2016/10/01 面试题
网络研修随笔感言
2014/02/17 职场文书
《匆匆》教学反思
2014/02/22 职场文书
借款协议书范本
2014/04/22 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
《迟到》教学反思
2016/02/24 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript