Vue3封装技巧（二）v-model的应用

Vue3封装技巧（二）v-model的应用

原因

在封装组件中，有一种情况，比如封装一个输入框，需要实时同步输入框内容，这个时候就是需要加入v-model操作了

v-model原理

在Vue中，v-model 是一个指令，用于实现双向数据绑定。它通常用于表单元素，例如输入框、复选框和单选按钮，以便将表单输入与Vue组件的数据属性进行绑定。v-model 的原理可以简要概括为以下几个步骤：

1. 建立绑定：当你使用 v-model 指令时，Vue会在内部创建一个双向绑定。它将元素的值与指定的数据属性绑定在一起，这意味着任何一方的变化都会影响另一方。
2. 监听输入事件：Vue会为绑定的表单元素添加一个监听器，以侦听用户的输入事件（如输入文本或选择选项）。这样，当用户在表单元素上输入内容时，Vue会捕获到这些事件。
3. 更新数据：当用户输入内容时，Vue会根据输入事件更新指定的数据属性的值。这意味着用户的输入会自动反映到你的Vue组件的数据上。
4. 反向更新表单元素的值：同时，如果在Vue组件的数据属性上发生了变化，Vue会将新的值反向更新到绑定的表单元素上。这会导致表单元素显示最新的数据状态。

其实也就可以总结其过程:

绑定值→传给子组件→子组件改变值触发事件→改变绑定值,传递给父组件

实现过程

接下来用来封装element plus组件库中的input框做一下简单实现

1.首先在父组件中加上v-model绑定上对应的值

2.在子组件接收v-model传值，并监听数据变化进行渲染数据，然后若触发事件后，利用事件进行更新回传

这里需要注意几个知识点：

modelValue：modelValue 是一个内置的 prop 名称，当你在一个自定义组件上使用 v-model 指令时，Vue 3 会默认将 v-model 绑定的值传递给组件的 modelValue prop

update:modelValue：update:modelValue事件用于通知父组件要更新与v-model关联的数据属性的值，代码中用emits函数触发update:modelValue事件时，而后面传递的参数将成为新的v-model绑定的值

总结

这里只是在日常封装中想用v-model的一个简单实现，大逻辑是这样做，但在真实需求中需要视情况进行改变，后续如果对封装有进一步了解，会进一步补充。