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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
原生js实现五子棋游戏
2020/05/28 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
django批量导入xml数据
2016/10/16 Python
Python解惑之整数比较详解
2017/04/24 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
农民工创业典型事迹
2014/01/25 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
先进个人总结范文
2015/02/15 职场文书
圣诞晚会主持词
2015/07/01 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL