You can use the V-model directive to create two-way data binding on forms
,
The use of the V-Model will not be described here. This section only discusses how to implement v-Models in custom components. According to the vUE website, the essence of the V-Model is syntactic sugar: 

<input type="text" v-model="name">Copy the code
Is equivalent to: 

<input type="text" :value="name" @input="name = $event.target.value">Copy the code
So you can use v-Model bidirectional binding in a custom component by setting a prop named Value and emitting an input event with a new value when the data changes. It’s very simple, like this: 

<template>
    <input type="text" :value="value" @input="handleInput" :placeholder="placehodler" />
</template>
<script>
  export default {
    name: 'kInput',
    props: {
        value: ['String'.'Number'],
        placeholder: String
    },
    methods: {
        handleInput ($event) {// Emit the value via the input tag's native event input to make it worth changing to implement bidirectional binding this.$emit('input'.$event.target.value)
        }
    }
  }
</script>
<style scoped type="less">
</style>Copy the code
However, recently I found another way to implement the V-Model while looking through the vUE official website documents.

By default, a V-Model on a component makes use of a prop named Value and an event named input, but input controls of types like checkboxes, checkboxes, and so on May use ValueAttribute for different purposes. The Model option can be used to avoid such conflicts: ———— from the vue website 
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"> '}) // ———— from vue official websiteCopy the code
As you can see, VUE has expanded the implementation of the V-Model to accommodate special users of some form elements, as well as making it more flexible.