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自定义事件的表单输入组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
主要内容:实例,实例,自定义组件的 v-model,实例,实例父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即: 使用 监听事件 使用 触发事件 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的
本文向大家介绍Vue.js组件通信之自定义事件详解,包括了Vue.js组件通信之自定义事件详解的使用技巧和注意事项,需要的朋友参考一下 组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。子组件用**$ emit()来触发事件**,父组件用**
在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。 仅能在5+ App及流应用中使用
自定义事件主要会被用于框架、组件设计与实现中。 自定义的事件有许多的创建方式,但实际的业务场景中几乎不会被用到,网络上的文献记载其具体的使用场景也相对较少。 1. 使用 Event 构造函数 使用 Event 构造函数就可以创建一个自定义事件。 案例演示 预览 复制 复制成功! <style> .btn { border: 1px solid #4caf50; padding: 8px 12p
自定义事件 Custom events iScroll还提供额一些你可以挂靠的有用的自定义事件。 使用on(type, fn)方法注册事件。 myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething); 上面的代码会在每次滚动停止是执行doSomething方法。 可以挂靠的事件如下: beforeScrol
我们知道,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 使用v-on绑定自定义事件 每个 Vue 实例都实现了事件接口,即: 使用$on(eventName)监听事件 使用$emit(eventName, optionalPayload)触发事件 Vue 的事件系统与浏览器的EventTarget API有所不同。尽管它们的