v-model(vue3)

我看 v-model（vue3）

首先先抛出文章的重点如下（后面会解释他是怎么来的）：

// 在父组件中
 <InputChecked :modelValue="checked"
   @update:modelValue="checked = $event" />

// 等价于
 <InputChecked v-model="checked"/>

这个v-model之前还是在vue2的时候就困扰了我，这一次又遇到了它，我决定好好看看它的实现过程。（这里我还是很浅薄的谈一点，以后会对这篇文章再做改进的）

我建议还是一步一步的来，从实现双向绑定开始，在这个过程中慢慢体会

第一步

如图，父组件引入一个子组件InputChecked，这个子组件需要传入一个属性以此来判断是否带有选中效果（是否带有类样式checked），默认是false，之后就通过这个例子，来实现v-model,双向的绑定。

第二步

这里，首先是给子组件添加了一个选中状态根据是否有类样式来实现，其次这个子组件注册一个点击事件，点击过后将从子组件抛出事件并携带信息到父组件，让父组件做出处理，以达到选中和取消的目的，图中明显可以看出，点击过后，相关信息已经反应到父组件，接下来就是需要让父组件监听事件。

第三步

这就是父组件监听函数，接收子组件传递的事件参数，并重新把更改的数据给子组件，实现的双向绑定，而这与v-model="checked"是等价的。

// 在父组件中
 <InputChecked :modelValue="checked"
   @update:modelValue="checked = $event" />

// 等价于
 <InputChecked v-model="checked"/>

v-model绑定多个属性

另外，在vue3中，v-model可以绑定多个数据，这也就意味着mode的配置被取消（这个是用来配置，绑定的数据属性的），绑定的多个数据可以是这样的

 <InputChecked v-model:propsName="propsData"/>
这就相当于是
 <InputChecked :propsName="propsData"
   @update:propsName="prospData = $event" />

自定义v-model修饰符

这个修饰符的实现，需要自己去实现

如下图实现trim

const handleTextChange = (e) => {
  let value = e.target.value;
  if (props.titleModifiers.trim) {
    value = value.trim();
  }
  ctx.emit("update:title", value);
};

就是判断存在某个修饰符的时候再做其他操作
（注：以上或许有不妥的地方，后面会再做更正）