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);
              };