怎么深入了解vue2中的v-model以及让组件支持该语法

怎么深入了解vue2中的 v-model以及让组件支持该语法，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

十载的日照网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整日照建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“日照网站设计”,“日照网站推广”以来，每个客户项目都认真落实执行。

一、v-model 的本质是语法糖。

『v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』 -- 官方文档。【相关推荐：vue.js教程】

什么是语法糖？

语法糖，简单来说就是『便捷写法』。

在大部分情况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"；

没错，在大部分情况下如此。

但也有例外：

• vue2 给组件提供了 model 属性，可以让用户自定义传值的prop名和更新值的事件名。这个暂且略过，第四节会细说。

• 对于原生 html 原生元素，vue 干了大量『脏活儿』，目的是为了能让我们忽视 html 在api上的差异性。以下元素的左右两种写法是等价的：

• textarea 元素：

• select 下拉框：

• input type='radio' 单选框：

• input type='checkbox' 多选框：

在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。

二、v-model 仅仅是语法糖吗？(冷知识)

v-model 不仅仅是语法糖，它还有副作用。

副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

举个例子，看下面的代码：

// template中：

// script中：
export default {
  data() {
    return {
      user: {
        name: '公众号: 前端要摸鱼',
      }
    }
  }
}

响应式数据中没有定义 user.tel 属性，但是 template 里却用 v-model 绑定了 user.tel，猜一猜当你输入时会发生什么？

看效果：

揭晓答案吧：user 上会新增 tel 属性，并且 tel 这个属性还是响应式的。

这就是『副作用』带来的效果，你学会了吗？

三、 v-model 是双向绑定还是单向数据流？

2.1 v-model 是双向绑定吗？

是，官方说是。

『你可以用 v-model 指令在表单 、</code> 及 <code><select></code> 元素上创建双向数据绑定。』 —— vue2官方文档</p><h4 data-id="heading-5">2.2 那 <code>v-model</code> 是单向数据流吗？</h4><blockquote><p>是的，它甚至是单向数据流的典型范式。</p></blockquote><p>虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。</p><ul><li><p>什么是单项数据流？</p></li></ul><p>子组件不能改变父组件传递给它的 <code>prop</code> 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。</p><ul><li><p><code>v-model</code> 的做法是怎样的？</p></li></ul><p><code>v-model</code> 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。</p><p>众所周知 <code>.sync</code> 修饰符是单向数据流的另一个典型范式。</p><p><img src="/upload/otherpic67/168520.jpg" alt="怎么深入了解vue2中的 v-model以及让组件支持该语法"></p><p>『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。</p><h3 data-id="heading-6">四、如何让你开发的组件支持 <code>v-model</code></h3><blockquote><p>虽然不想说，但这确实是高频面试题。</p></blockquote><p>在定义 <code>vue</code> 组件时，你可以提供一个 <code>model</code> 属性，用来定义该组件以何种方式支持 <code>v-model</code>。</p><p><code>model</code> 属性本身是有默认值的，如下：</p><pre>// 默认的 model 属性 export default {   model: {     prop: 'value',     event: 'input'   } }</pre><p>也就是说，如果你不定义 <code>model</code> 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，<code>v-model="foo"</code> 就完全等价于 <code>:value="foo"</code> 加上 <code>@input="foo = $event"</code>。</p><p>如果把 <code>model</code> 属性进行一些改装，如下：</p><pre>// 默认的 model 属性 export default {   model: {     prop: 'ame',     event: 'zard'   } }</pre><p>那么，<code>v-model="foo"</code> 就等价于 <code>:ame="foo"</code> 加上 <code>@zard="foo = $event"</code>。</p><p>没错，就是这么容易，让我们看个例子。</p><p>先定义一个自定义组件：</p><pre><template> <div>   我们是TI{{ ame }}冠军   <el-button @click="playDota2(1)">加</el-button>   <el-button @click="playDota2(-1)">减</el-button> </div> </template> <script> export default {   props: {     ame: {       type: Number,       default: 8     }   },   model: { // 自定义v-model的格式     prop: 'ame', // 代表 v-model 绑定的prop名     event: 'zard' // 代码 v-model 通知父组件更新属性的事件名   },   methods: {     playDota2(step) {       const newYear = this.ame + step       this.$emit('zard', newYear)     }   } } </script></pre><p>然后我们在父组件中使用该组件：</p><pre>// template中 <dota v-model="ti"></dota> // script中 export default {   data() {     return {       ti: 8     }   } }</pre><p>看看效果：</p><p><img src="/upload/otherpic67/168521.jpg" alt="怎么深入了解vue2中的 v-model以及让组件支持该语法"></p><p>让你的组件支持 <code>v-model</code> 就这么容易。</p><h3 data-id="heading-7">五、demo和源码</h3><blockquote><p>获取源码请访问github</p><p>https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model</p></blockquote><p>关于怎么深入了解vue2中的 v-model以及让组件支持该语法问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。</p> <br> 新闻名称：怎么深入了解vue2中的v-model以及让组件支持该语法 <br> 网页链接：<a href="http://shouzuofang.com/article/poodgp.html">http://shouzuofang.com/article/poodgp.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dihcpse.html">ios电商app开发机构 电商app开发服务平台</a> </li><li> <a href="/article/dihcpis.html">ios开发替换返回按钮 ios开发替换返回按钮怎么设置</a> </li><li> <a href="/article/dihcpje.html">android逆向助手 apk逆向助手</a> </li><li> <a href="/article/dihcpij.html">linux进终端命令不行 linux终端进程</a> </li><li> <a href="/article/dihcpge.html">css内部样式logo css内部样式和外部样式的区别是什么</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求