在Vue中，v-model是一个语法糖，它可以帮助我们更简单地创建双向绑定。在Vue 2和Vue 3中，v-model的实现方式略有不同。
Vue 2中的v-model
在Vue 2中，v-model实质上是一个语法糖，它被解析为:value和@input的组合。
<!-- 父组件 -->
<template>
<ChildComponent v-model="message" />
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
<!-- 子组件 -->
<template>
<input :value="value" @input="updateValue($event.target.value)" />
</template>
<script>
export default {
props: ['value'],
methods: {
updateValue(value) {
this.$emit('input', value);
}
}
}
</script>
Vue 3中的v-model
在Vue 3中，v-model的实现更为简洁，可以直接通过自定义v-model的prop和event来实现。
<!-- 父组件 -->
<template>
<ChildComponent v-model="message" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('');
return { message };
}
}
</script>
<!-- 子组件 -->
<template>
<input :value="modelValue" @input="updateValue($event.target.value)" />
</template>
<script>
export default {
props: {
modelValue: String,
},
emits: ['update:modelValue'],
methods: {
updateValue(value) {
this.$emit('update:modelValue', value);
}
}
}
</script>
在Vue 3中，我们可以通过v-model的prop和event进行自定义，而不再局限于value和input。
其他双向绑定的写法
- 使用\`.sync修饰符：
<!-- 父组件 -->
<template>
<ChildComponent :message.sync="parentMessage" />
</template>
<script>
export default {
data() {
return {
parentMessage: ''
}
}
}
</script>
<!-- 子组件 -->
<template>
<input :value="message" @input="$emit('update:message', $event.target.value)">
</template>
<script>
export default {
props: ['message'],
}
</script>
- 使用事件发射的方式：
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" @update-message="updateParentMessage" />
</template>
<script>
export default {
data() {
return {
parentMessage: ''
}
},
methods: {
updateParentMessage(value) {
this.parentMessage = value;
}
}