vue 3中的v-model双向绑定相对于vue 2的改变

最近学习vue组件库的开发，在做input组件的时候，发现现在vue 3 中v-model的双向绑定和vue 2 的实现有所不同了，特地记录一下，具体可以参考官方教程：官方文档

下面以input组件为例，做个简单的演示，记录下理解

vue 2的双向绑定

在父组件中

<input v-model="name" />

其实，一个v-dodel就是下面的语句：

<input :value="name" @input = "target.$event" />

而通常在子组件中，只需要做下面的这件事就可以实现双向绑定

 methods: {
    changeName(name) {
      this.$emit('input', name)
    }
  }

vue 3的双向绑定

在父组件中

<input v-model="name" />
​
<!-- 是以下的简写: -->
<input :modelValue="name" @update:modelValue="target.$event" />

但是这里还有一种写法，就是具体指明model的具体内容

<input v-model:name="name" />
​
<!-- 是以下的简写: -->
<input :name="name" @update:name="target.$event" />

两种不同的写法实现双向绑定也有点点区别

<!-- <input v-model="name" />的写法 -->
emits: ['update:modelValue'],
  methods: {
    changeName(name) {
      this.$emit('update:modelValue', name) // 以前是 `this.$emit('input', name)`
    }
  }
​
<!-- <input v-model:name="name" />的写法 -->
emits: ['update:name'],
  methods: {
    changeName(name) {
      this.$emit('update:name', name) // 以前是 `this.$emit('input', name)`
    }
  }

这里同时使用 emits进行注册emit事件，和 prop 类似，现在可以通过 emits 选项来定义组件可触发的事件，不添加的话，会触发两次。具体教程可以参考官方文档