阅读本文📖
\n你将:
\n- \n
- 弄明白：
v-model是什么的语法糖？vue2对原生组件究竟做了什么特殊处理？ \n - 弄明白：
v-model到底是单向数据流还是数据双向绑定？ \n - 弄明白：
v-model在语法糖之外的『副作用』？ \n - 学会如何让你的组件也支持
v-model语法。 \n
一、v-model 的本质是语法糖。
\n\n\n『
\nv-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』 – 官方文档
什么是语法糖？
\n\n\n语法糖，简单来说就是『便捷写法』。
\n
在大部分情况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"；
<!-- 在大部分情况下，以下两种写法是等价的 -->\n<el-input v-model="foo" />\n\n<el-input :value="foo" @input="foo = $event" />\n没错，在大部分情况下如此。
\n但也有例外：
- \n
- \n
\nvue2给组件提供了model属性，可以让用户自定义传值的prop名和更新值的事件名。这个暂且略过，第四节会细说。 \n - \n
对于原生
\nhtml原生元素，vue干了大量『脏活儿』，目的是为了能让我们忽视html在api上的差异性。以下元素的左右两种写法是等价的： \n
- \n
textarea元素：
\n \nselect下拉框：\n \ninput type='radio'单选框：\n \ninput type='checkbox'多选框：\n \n
在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。
\n二、v-model 仅仅是语法糖吗？(冷知识)
\n\n\n\n
v-model不仅仅是语法糖，它还有副作用。
副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。
举个例子，看下面的代码：
\n// template中：\n<el-input v-model="user.tel"></el-input>\n// script中：\nexport default {\n data() {\n return {\n user: {\n name: '公众号: 前端要摸鱼',\n }\n }\n }\n}\n响应式数据中没有定义 user.tel 属性，但是 template 里却用 v-model 绑定了 user.tel，猜一猜当你输入时会发生什么？
看效果：
\n
揭晓答案吧：\nuser 上会新增 tel 属性，并且 tel 这个属性还是响应式的。
这就是『副作用』带来的效果，你学会了吗？
\n三、 v-model 是双向绑定还是单向数据流？
\n2.1 v-model 是双向绑定吗？
\n\n\n是，官方说是。
\n
『你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。』 —— vue2官方文档
2.2 那 v-model 是单向数据流吗？
\n\n\n是的，它甚至是单向数据流的典型范式。
\n
虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。
\n- \n
- 什么是单项数据流？
\n子组件不能改变父组件传递给它的prop属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。 \n v-model的做法是怎样的？
\nv-model做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。 \n
众所周知 .sync 修饰符是单向数据流的另一个典型范式。\n
『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。
\n四、如何让你开发的组件支持 v-model
\n\n\n虽然不想说，但这确实是高频面试题。🤣
\n
在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。
model 属性本身是有默认值的，如下：
// 默认的 model 属性\nexport default {\n model: {\n prop: 'value',\n event: 'input'\n }\n}\n也就是说，如果你不定义 model 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。
如果把 model 属性进行一些改装，如下：
// 默认的 model 属性\nexport default {\n model: {\n prop: 'ame',\n event: 'zard'\n }\n}\n那么，v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"。
没错，就是这么容易，让我们看个例子。
\n先定义一个自定义组件：
\n<template>\n<div>\n 我们是TI{{ ame }}冠军\n <el-button @click="playDota2(1)">加</el-button>\n <el-button @click="playDota2(-1)">减</el-button>\n</div>\n</template>\n<script>\nexport default {\n props: {\n ame: {\n type: Number,\n default: 8\n }\n },\n model: { // 自定义v-model的格式\n prop: 'ame', // 代表 v-model 绑定的prop名\n event: 'zard' // 代码 v-model 通知父组件更新属性的事件名\n },\n methods: {\n playDota2(step) {\n const newYear = this.ame + step\n this.$emit('zard', newYear)\n }\n }\n}\n</script>\n然后我们在父组件中使用该组件：
\n// template中\n<dota v-model="ti"></dota>\n// script中\nexport default {\n data() {\n return {\n ti: 8\n }\n }\n}\n看看效果：\n
让你的组件支持 v-model 就这么容易。
五、demo和源码
\n获取源码请访问github zhangshichun的github
\n六、结束
\n我是春哥。
\n我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。
你可以在掘金关注我，也可以在公众号里找到我：前端要摸鱼。
\n希望大家玩得开心。
\n 版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。\n 作者: 春哥的梦想是摸鱼\n 原文链接：https://juejin.im/post/7049135444310622245\n
![\"企业微信截图_16467020782042.png\"](\"https://static.vue-js.com/0456f0f0-9e7d-11ec-b69d-715259609f68.png\")
\n在vue3里要怎么用啊 ![\"企业微信截图_16467022157160.png\"](\"https://static.vue-js.com/513f5b50-9e7d-11ec-b69d-715259609f68.png\")
\n我把它放到App.vue里了打包不起作用![](\"http://test.fe.ptdev.cn/elm/screenshots/elm_ewm.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/msite.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/msite.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/food.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/food.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/search.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/search.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/shop_cart.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/shop_cart.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/login1.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/login.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/profile.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/profile.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/confirm1.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/confrimOrder.gif\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/order.png\")
![](\"http://test.fe.ptdev.cn/elm/screenshots/order.gif\")
![@公众号:JS每日一题](\"https://static.vue-js.com/b4b71a30-443b-11eb-85f6-6fac77c0c9b3.png\"){kind=link}