To add custom components vuejs v-model two-way binding support

Used front-end engineers vuejs, for the v-model certainly impressive. It is similar to the native html textarea, input and other native ability to add two-way data binding is very convenient. But for your custom vue components can not be directly applied v-model, we need to do some extra work, but this extra work is very simple.

In order to understand how to give your v-momeiydel component provides support, you should thoroughly understand the v-model itself to the bottom of how it works. Early v-model looks like a magic, but really not that mysterious.

v-model="syncedProp"

It is equivalent to the following code

:value="syncedProp" @input="syncedProp=$arguments[0] 或者
:value="syncedProp" @input="syncedProp=$event.target.value

To understand the above two points, so if you need to support v-model, your own components have to do is:

1. Receive a: value of the property

2. When the user change the value of the value of sending a @input event

Basis to achieve:

We assume that we have a date picker assembly, the assembly reception year, month's value: {month: 1, year: 2019}, we hope that the Inputs component has two inputs, one for the month The, for a year, and to update the object bound by the v-model here is an example code implementation:

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>

With the realization of the above code, we can be like the following code to use it:

<template>
  <div class="wrapper">
    <date-picker v-model="date"></date-picker>
    <p>
      Month: {{date.month}}
      Year: {{date.year}}
    </p>
  </div>
</template>

<script>
import DatePicker from './DatePicker.vue';

export default {
  components: {
    DatePicker
  },

  data() {
    return {
      date: {
        month: 1,
        year: 2017
      }
    }
  }
})
</script>

Summing up the above sample code, we can see to do two things:

1. The value of this takes a prop, and components used in the present value by the passed value prop

2. When you need to notify the external data has been changes need to be updated external data binding, just emit a input event can be!

High point of the example

In the basic version, based on the above, we make things a little more complicated, for example, we passed the date format is not the object form, while a string mm / yyyy format, then the need to use technology, must do more processing, in the same manner, when a user actively modifying the correction data to an external data, need to be combined into a string emit out!

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  computed: {
    splitDate() {
      const splitValueString = this.value.split('/');

       return {
        month: splitValueString[0],
        year: splitValueString[1]
      }
    }
  },

  methods: {
    updateDate() {
      const monthValue = this.$refs.monthPicker.value;
      const yearValue = this.$refs.yearPicker.value;
      this.$emit('input', `${monthValue}/${yearValue}`);
    }
  }
};
</script>