v-model 简单理解

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

v-model 只是语法糖而已

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

注意: 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。

1. 作用在表单元素上, 普通标签上

动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：

 
 //  等同于
 
 //$event 指代当前触发的事件对象;
 //$event.target 指代当前触发的事件对象的dom;
 //$event.target.value 就是当前dom的value值;
 //在@input方法中，value => sth;
 //在:value中,sth => value;
1
2
3
4
5
6
7
8
9
10
11

2. 作用在组件上

在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件

本质是一个父子组件通信的语法糖，通过prop和$.emit实现。 因此父组件 v-model 语法糖本质上可以修改为：

 
1

在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。

例子：

 // 父组件
 
 // 等价于
 
 ​
 // 子组件：
 
 ​
 props:{value:aa,}
 methods:{
     onmessage(e){
         $emit('input',e.target.value)
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

默认情况下，一个组件上的v-model 会把 value 用作 prop且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。js 监听input 输入框输入数据改变，用oninput，数据改变以后就会立刻出发这个事件。通过input事件把数据$emit 出去，在父组件接受。父组件设置v-model的值为input $emit过来的值。

3. v-model 可以被用在自定义组件上吗？如果可以，如何使用？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8yCwCSr-1659972316717)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33608b6b986d4f18932d198e5b9bfc08~tplv-k3u1fbpfcp-zoom-1.image)]

可以。v-model 实际上是一个语法糖，如：

 
1

实际上相当于：

 
1
2
3
4

用在自定义组件上也是同理：

 
1

相当于：

 
1
2
3
4

显然，custom-input 与父组件的交互如下：

0. 父组件将searchText变量传入custom-input 组件，使用的 prop 名为value；
1. custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText；

所以，custom-input 组件的实现应该类似于这样：

 Vue.component('custom-input', {
   props: ['value'],
   template: `
     
   `
 })
1
2
3
4
5
6
7
8
9

如果自定义v-model, prop 只能是一个属性. 如果想用多个属性, 可以用.sync 修饰符

4. v-model 在 vue2 vue3 自定义的差异

vue 2 中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nH2spvaY-1659972316720)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a174f1b09fac48ba8caffba6871deeea~tplv-k3u1fbpfcp-zoom-1.image)]

如果其他组件, 比如 checkbox, 就会有 model, 用 check 为变化属性, change 为监听事件

只能支持一个 model, 限时中可能使用多个 model

vue 3 中

移除了 model, 变为 modelValue: foo, ‘onUpdate:modelvalue’: value => (foo = value)