vue组件v model实现
Vue 组件实现 v-model
在 Vue 中，v-model 是语法糖，用于在表单元素或自定义组件上实现双向数据绑定。对于自定义组件，v-model 默认会利用 value prop 和 input 事件，但可以通过 model 选项进行自定义。
基本实现方式
自定义组件中实现 v-model 需要定义一个 value prop 并在数据变化时触发 input 事件。
<template>
<input
:value="value"
@input="$emit('input', $event.target.value)"
/>
</template>
<script>
export default {
props: ['value']
}
</script>父组件中使用方式：
<custom-input v-model="message"></custom-input>自定义 prop 和事件
如果需要修改默认的 value prop 和 input 事件，可以在组件中通过 model 选项配置。
<template>
<input
:value="checked"
@change="$emit('change', $event.target.checked)"
/>
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked']
}
</script>父组件中使用方式：
<custom-checkbox v-model="isChecked"></custom-checkbox>使用计算属性
对于更复杂的逻辑，可以使用计算属性来处理双向绑定。
<template>
<input v-model="internalValue" />
</template>
<script>
export default {
props: ['value'],
computed: {
internalValue: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
}
</script>多个 v-model 绑定（Vue 2.4+）
在 Vue 2.4 及以上版本，可以通过 .sync 修饰符实现多个属性的双向绑定。
子组件：
<template>
<input
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
<input
:value="content"
@input="$emit('update:content', $event.target.value)"
/>
</template>
<script>
export default {
props: ['title', 'content']
}
</script>父组件中使用方式：
<custom-input
:title.sync="postTitle"
:content.sync="postContent"
></custom-input>Vue 3 中的变化
在 Vue 3 中，v-model 的默认 prop 从 value 改为 modelValue，事件从 input 改为 update:modelValue。同时支持多个 v-model 绑定。
子组件：
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>父组件中使用方式：
<custom-input v-model="message"></custom-input>多个 v-model 绑定：
<custom-input
v-model:title="postTitle"
v-model:content="postContent"
></custom-input>通过以上方法，可以灵活地在 Vue 组件中实现 v-model 功能，满足不同的业务需求。
