vue中v-model的底层实现

原生表单元素的v-model实现

对于input/textarea/select等原生表单工具,v-model的编译结果

1

<input v-model="message">

等价于:

1
2
3

<input
 :value="message"
 @input="message = $event.target.value"

不同元素的差异

自定义组件的v-model实现

vue2实现

1

<MyCompont v-model="value">

等价于

1
2
3

<MyComponent
    :value="value"
    @input="value = $event"

vue3实现

1
2
3
4

<MyComponent
    :modelValue="value"
    @update:modelValue="value = $event"
    >

自定义v-model

1. 修改默认属性/事件名称(vue2)

   1 2 3 4 5 6 7 8

   //子组件 export default { model: { prop: "title", event: "title-change" }, props: ["title"] }

2. 多v-model绑定(vue3)

   1 2 3 4

   <MyComponent v-model:title="title" v-model:content="content" >

   等价于

   1 2 3 4 5

   <MyComponent :title="title" @update:title="title = $evet" :content="content" @update:content="content = $event"