如何自定義元件的v-model

如果說要MyInput.vue元件，和父元件App.vue中的name關聯

1、MyInput.vue

<template>
  <div>
    <input type="textarea" :value='value' @input='(e)=>$emit("input",e.target.value)'>
  </div>
</template>
<script>
export default {
  props: ['value']
}
</script>      

2、App.vue

<MyInput :value="name" @input='name=$event' />      

　　此處，可以使用v-model='name'替換 :value='name' @input='name=$event'，即：

<MyInput v-model="name" />      

那如果要定義一個MyCheckbox元件呢？

1、MyCheckbox.vue

<template>
  <div>
    <input type="checkbox" :checked='checked' @change='(e)=>$emit("change",e.target.checked)'>選項
  </div>
</template>
<script>
export default {
  props: ['checked']
}
</script>      

2、App.vue

<MyCheckbox :checked='checked' @change="checked=$event" />      

　　如果此處要想使用v-model去替換:checked='checked' @change="checked=$event"，即：

<MyCheckbox v-model="checked" />      

　　那麼此時是無效的，因為v-model的預設屬性是value，預設的事件是input，需要在子元件内去自定義v-model的屬性名和事件名

3、MyCheckbox.vue

model: {
    prop: 'checked',
    event: 'change'
  }      

　　此時，<MyCheckbox v-model="checked" />上的v-mode綁定的屬性為checked，事件為change