原因
在封装组件中，有一种情况，比如封装一个输入框，需要实时同步输入框内容，这个时候就是需要加入v-model操作了
v-model原理
在Vue中，v-model 是一个指令，用于实现双向数据绑定。它通常用于表单元素，例如输入框、复选框和单选按钮，以便将表单输入与Vue组件的数据属性进行绑定。v-model 的原理可以简要概括为以下几个步骤：
- 建立绑定：当你使用
v-model指令时，Vue会在内部创建一个双向绑定。它将元素的值与指定的数据属性绑定在一起，这意味着任何一方的变化都会影响另一方。 - 监听输入事件：Vue会为绑定的表单元素添加一个监听器，以侦听用户的输入事件（如输入文本或选择选项）。这样，当用户在表单元素上输入内容时，Vue会捕获到这些事件。
- 更新数据：当用户输入内容时，Vue会根据输入事件更新指定的数据属性的值。这意味着用户的输入会自动反映到你的Vue组件的数据上。
- 反向更新表单元素的值：同时，如果在Vue组件的数据属性上发生了变化，Vue会将新的值反向更新到绑定的表单元素上。这会导致表单元素显示最新的数据状态。
其实也就可以总结其过程:
绑定值→传给子组件→子组件改变值触发事件→改变绑定值,传递给父组件
实现过程
接下来用来封装element plus组件库中的input框做一下简单实现
1.首先在父组件中加上v-model绑定上对应的值
<template>
<div>
<Child v-model="getChild"></Child>
</div>
</template>
<script setup lang="ts">
import Child from "@/views/components/Child.vue";
import { ref } from "vue";
const getChild = ref();
</script>
2.在子组件接收v-model传值，并监听数据变化进行渲染数据，然后若触发事件后，利用事件进行更新回传
<template>
<div>
<el-input v-model="input" placeholder="Please input" @change="change" />
</div>
</template>
<script setup lang="ts">
import { ref, toRefs, watch } from "vue";
const props = defineProps({
modelValue: String,
});
const input = ref();
const { modelValue } = toRefs(props);
input.value = modelValue.value;
// 监听数据变化进行渲染
watch(
() => props.modelValue,
(newValue) => {
input.value = newValue;
}
);
const emits = defineEmits(["update:modelValue"]);
// 触发事件进行回传
const change = () => {
emits("update:modelValue", input.value);
};
</script>
<style scoped></style>
这里需要注意几个知识点：
modelValue：modelValue 是一个内置的 prop 名称，当你在一个自定义组件上使用 v-model 指令时，Vue 3 会默认将 v-model 绑定的值传递给组件的 modelValue prop
update:modelValue：update:modelValue事件用于通知父组件要更新与v-model关联的数据属性的值，代码中用emits函数触发update:modelValue事件时，而后面传递的参数将成为新的v-model绑定的值
总结
这里只是在日常封装中想用v-model的一个简单实现，大逻辑是这样做，但在真实需求中需要视情况进行改变，后续如果对封装有进一步了解，会进一步补充。
