Vue2.x 之中，實現自定義 v-model

  // CheckComponent.vue

  <template>
    <input type="checkbox" :value="value" @change="$emit('input', $event.target.value)">
  </template>

  <script>
    export default {
      name: 'InputComponent',
      mode: {
        prop: 'value',
        event: 'change'
      }
      props: {
        value: {
          required: true
        }
      }
    }
  </script>

  // ParentComponent.vue

  <template>
    <CheckComponent v-model="variable">
  </template>
 

Vue 3.x 之中，實現自定義 v-model，且去掉 sync 修飾符的概念

  // CheckComponent.vue

  <template>
    <input type="checkbox" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" >
  </template>

  <script>
    export default {
      props: {
        modelValue: {
          required: true
        }
      }
    }
  </script>


  // ParentComponent.vue

  <template>
    <CheckboxComponent v-model="variable" >
  </template>
 

結果來看，首先程式碼量上減少了很多，而且不再使用 model 的一個概念，減輕了一定的心智負擔，而且還有很多 Vue 3的新特性顯示了這類的優點，日後繼續詳談。