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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
jquery 选取方法都有哪些
May 18 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
详解Python中with语句的用法
2015/04/15 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python微信好友数据分析详解
2018/11/19 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
教师节活动总结
2014/08/29 职场文书
迎七一演讲稿
2014/09/12 职场文书
员工工作能力评语
2014/12/31 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书