v-model綁定一個對象，組件內部分別負責不一樣字段的場景實現

咱們知道v-model對於單個property雙向數據綁定很是有用，保持父子組件之間的數據傳遞和同步，但也有不少場景下但願一個組件可以處理多個數據字段，這時就有一些小小技巧了。

https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components

好比，如下爲createCustomer組件：

<template>
  <div>
    <div>
      <label>Name</label>
      <input type="text" :value="value.name" @input="update('name', $event.target.value)">
    </div>
    <div>
      <label>Type</label>
      <select :value="value.type" @input="update('type', $event.target.value)">
        <option value="Person">Person</option>
        <option value="Company">Company</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    update(key, value) {
      this.$emit('input', { ...this.value, [key]: value })
    },
  },
}
</script>

組件的使用方法:

<CreateCustomer v-model="{ name: 'John Doe', type: 'Person' }"></CreateCustomer>