登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

带你深入了解vue2中的 v-model，看看如何让组件支持该语法

本篇文章带大家了解一下vue2中的 v-model，看看v-model 是双向绑定还是单向数据流，如何让你开发的组件支持 v-model，希望对大家有所帮助。

带你深入了解vue2中的 v-model，看看如何让组件支持该语法

阅读本文

你将:

  • 弄明白： v-model 是什么的语法糖？ vue2 对原生组件究竟做了什么特殊处理？
  • 弄明白： v-model 到底是单向数据流还是数据双向绑定？
  • 弄明白： v-model 在语法糖之外的『副作用』？
  • 学会如何让你的组件也支持 v-model 语法。

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

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

什么是语法糖？

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

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

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

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

但也有例外：

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

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

  • textarea 元素：

1.png

  • select 下拉框：

2.png

  • input type='radio' 单选框：

3.png

  • input type='checkbox' 多选框：

4.png

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

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

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

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

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

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: &#39;公众号: 前端要摸鱼&#39;,
      }
    }
  }
}

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

看效果：

5.gif

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

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

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

2.1 v-model 是双向绑定吗？

是，官方说是。

『你可以用 v-model 指令在表单 、