这次给大家带来Vue.js自定义事件如何进行表单输入组件,Vue.js自定义事件进行表单输入组件的注意事项有哪些,下面就是实战案例,一起来看一下。

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。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在vue里如何使用xe-utils

vue-router进行build时不显示路由页面怎么处理

以上就是Vue.js自定义事件如何进行表单输入组件的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码