Form input component method of Vue.js custom event

亚连
Release: 2018-05-31 16:32:54
Original
1497 people have browsed it

Below I will share with you a form input component method for Vue.js custom events. It has a good reference value and I hope it will be helpful to everyone.

Vue.js forms input components using custom events

Custom events can be used to create custom form input components and use v-model to process data Two-way binding. Something to keep in mind:

Copy after login

This is just syntactic sugar for the following example:

Copy after login

So when used in a component, it is equivalent to the shorthand for:

 
Copy after login

So for the v-model of the component to take effect, it should (configurable from 2.2.0 onwards):

Accepts a value prop

In The input event is triggered when there is a new value and the new value is used as a parameter

Let's look at a very simple custom control for currency input: --Use binding v- when referencing the child component template in the parent component Model data:

Copy after login
Vue.component('currency-input', { template: '\ \ $\ \ \ ', 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)) } } })
Copy after login

Custom component’sv-model

2.2.0 Added

By default, a component’s v-model Will use value prop and input events. But input types such as radio buttons and check boxes may use value for other purposes. The model option can avoid such conflicts:

Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, // 这样就允许拿 `value` 这个 prop 做其它事了 value: String }, // ... })
Copy after login
Copy after login

The above code is equivalent to:

 
Copy after login

Note that you still need to explicitly declare the checked prop.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A brief discussion on React high-order components

vue-cli axios request method and cross-domain processing issues

jQuery implements the function of jumping between browsers and passing parameters [supports Chinese characters]

The above is the detailed content of Form input component method of Vue.js custom event. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!