vue3 組件的v-model實現

1. 在vue2中，v-model="val"是 :value="val"和@input="val=$event.target.value"的語法糖

   <input v-model="val" />
   <input :value="val" @input="val = $event.target.value" />

2. Vue2的自定義組件的v-model

   1. 　input組件
      

      // 父組件
      <my-component v-model="val" />
      <my-component :value="val" @input="val = arguments[0]" />
      
      // 子組件
      <template>
         <input type="text" :value="val" @input="updateInput" />
      </template>
              
      <script>
      export default {
        props: {
          val: String
        }
                
        methods: {
          updateInput(e) {
            this.$emit("input", e.target.value)
          }
        }
      }
      </script>

   2.  特殊的組件，比如checkbox組件，通過model屬性指定prop參數和event事件

       

      // 父組件
      <my-component v-model="val" />
      <my-component :value="val" @change="val = arguments[0]" />
      
      // 子組件
      <template>
         <input type="checkbox" :checked="checked" @change="updateInput" />
      </template>
              
      export default {
        props: {
          checked: Boolean
        },
        model: {
          prop: "checked",
          event: "change"
        }
                
        methods: {
          updateInput(e) {
            this.$emit("change", e.target.checked)
          }
        }
      }

3. Vue3的v-model

   1.  

       在vue2的組件使用v-model很麻煩，而且只能綁定一個v-model，在vue3中對v-model進行了很大改變，不需要用model指定參數和事件

      　　

              // 父組件
              <validate-input :rules="emailRules" v-model="emailVal"></validate-input>
              
              // 子組件
              
              <input type="text" :value="modelValue" @input="updateVal" />
              
              //  1、定義prop屬性參數
              const props = defineProps<{
                modelValue: string;
              }>();
              
              //  2、定義emit名稱，update+prop屬性
              const emit = defineEmits(['update:modelValue']);
              
              // 3、綁定input事件，修改提交父組件修改屬性值，checked事件同理
              const updateVal = (e: Event) => {
                const targetVal = (e.target as HTMLInputElement).value;
                emit('update:modelValue', targetVal);
              };