Vue. js Custom Event form input component method, vue. js form

Vue. js Custom Event form input component method, vue. js form

Vue. js uses the form input component of the Custom Event

Custom events can be used to create custom form input components and use v-model for bidirectional data binding. Remember:

<input v-model="something">

This is just the syntax sugar in the following example:

<input v-bind:value="something" v-on:input="something = $event.target.value">

Therefore, when used in components, it is equivalent to the following shorthand:

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

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

Accept a value prop

The input event is triggered when a new value is generated and the new value is used as a parameter.

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

<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.tar get. value) "\ >\</span> \ ', props: ['value'], methods: {// The value is not directly updated, this method is used to format the input value and limit the number of digits updateValue: function (value) {var formattedValue = value // Delete space characters on both sides. trim () // retain 2 decimal places. slice (0, value. indexOf ('. ') =-1? Value. length: value. indexOf ('.') + 3) // if the value is not compliant, manually overwrite the value if (formattedValue! = Value) {this. $ refs. input. value = formattedValue} // this is taken out of the input event. $ emit ('input', Number (formattedValue ))}}})

TheV-model

2.2.0 added

By default, the v-model of a component uses the value prop and input events. However, value may be used for other purposes for input types such as single quotes and check boxes. The model option can avoid such conflicts:

Vue. component ('My-checkbox', {model: {prop: 'checked', event: 'change'}, props: {checked: Boolean, // In this way, the 'value' prop is allowed to do other things. value: String },//...})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

The above code is equivalent:

<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox>

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

The input component method of the above Vue. js Custom Event form is all the content shared by the editor. I hope to give you a reference, and hope you can provide more support for the customer's house.