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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php支付宝APP支付功能
2020/07/29 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
办理护照介绍信
2014/01/16 职场文书
公司保密承诺书
2014/03/27 职场文书
安全责任书模板
2014/07/22 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
生活委员竞选稿
2015/11/21 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书