v-model原理

v-model原理 即为 :value + @input

例，my-list组件关于v-model的两种写法都是同样的表现

//父组件
<my-input v-model="age"></my-input>
<my-input :value='age' @input="age=$event"></my-input>
    </div>
    
data() {
    return {
      age:10,
    };
  },

//子组件
<div>
    my-input<input type="text" :value="value" @input="fn">
  </div>
  
 props:['value'],
 methods: {
    fn(e) {
      //this.value=e.target.value//父组件更新会覆盖掉更新
      this.$emit("input", e.target.value);
    },

子组件也可以通过另一种方式进行修改，通过v-model=计算属性进行修改 父组件不变，子组件改为

如下

my-input<input type="text"  v-model="selfValue" />

computed: {
    selfValue: {
      get() {
          return this.value
      },
      set(v) {
        this.$emit("input", v);
      },
    }, 
  },

但是！！！v-model在组件和表单上的表现是不同的

组件上的表现：:value='xxx' @input="xxx=$event" 表单上的表现：:value='xxx' @input="xxx=$event.target.value"