vue 实现v model
Vue 中实现 v-model 的方法
v-model 是 Vue 中用于双向数据绑定的语法糖，本质上是 v-bind 和 v-on 的组合。以下是实现 v-model 的几种方式：
在表单元素上使用 v-model
对于原生表单元素（如 input、textarea、select），v-model 会自动绑定 value 属性和 input 事件。
<input v-model="message" placeholder="请输入内容">
<p>输入的内容是: {{ message }}</p>在自定义组件上实现 v-model
在 Vue 2.x 中，自定义组件需要通过 value prop 和 input 事件实现 v-model。
Vue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})在 Vue 3.x 中，v-model 的实现方式有所变化，支持多个 v-model 绑定，并且默认使用 modelValue prop 和 update:modelValue 事件。
app.component('custom-input', {
props: ['modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})修改 v-model 的默认行为
在 Vue 2.x 中，可以通过 model 选项修改 v-model 的 prop 和事件名称。
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked'],
template: `
<input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)"
>
`
})在 Vue 3.x 中，可以直接在 v-model 后指定参数名称。
<my-checkbox v-model:checked="isChecked"></my-checkbox>使用计算属性实现复杂逻辑
对于需要处理复杂逻辑的场景，可以使用计算属性结合 get 和 set 方法。
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}在 Composition API 中使用 v-model
在 Vue 3 的 Composition API 中，可以通过 ref 或 reactive 创建响应式数据，然后直接绑定到 v-model。
import { ref } from 'vue'
export default {
setup() {
const message = ref('')
return { message }
}
}<input v-model="message" placeholder="请输入内容">以上方法涵盖了 Vue 中实现 v-model 的主要场景，根据具体需求选择合适的方式即可。
