Custom event form input component method

Use a form input component for custom events

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

<input v-model="something">

This is nothing more than syntactic sugar for the following example:

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

So when used in components, it is equivalent to the following abbreviation:

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

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

Accept a value prop

Trigger input event when there is a new value and take the new value as a parameter

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

<currency-input v-model="price"></currency-input>

('currency-input', {
 template: '\
  &lt;span&gt;\
   $\
   &lt;input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($)"\
   &gt;\
  &lt;/span&gt;\
 ',
 props: ['value'],
 methods: {
  // Instead of updating the value directly, use this method to format and limit the input value  updateValue: function (value) {
   var formattedValue = value
    // Delete the space characters on both sides    .trim()
    // Keep 2 decimal places    .slice(
     0,
     ('.') === -1
      ? 
      : ('.') + 3
    )
   // If the value is not yet compliant, manually overwrite the compliant value   if (formattedValue !== value) {
    this.$ = formattedValue
   }
   // Bring out the value through the input event   this.$emit('input', Number(formattedValue))
  }
 }
})

Custom components v-model

2.2.0 New

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

('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // This is allowed to do other things with the `value` prop  value: String
 },
 // ...
})

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

The above code is equivalent to:

<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 above method for inputting the form component of the custom event is all the content I share with you. I hope you can give you a reference and I hope you can support me more.