搜索
首页web前端Vue.js带你深入了解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 指令在表单 d5fd7aea971a85678ba271703566ebfd4750256ae76b6b9d804861d8f69e79d3221f08282418e2996498697df914ce4e 元素上创建双向数据绑定。』 —— vue2官方文档

2.2 那 v-model 是单向数据流吗?

是的,它甚至是单向数据流的典型范式。

虽然官方没有明确表示这点,但我们可以捋一捋两者的关系。

  • 什么是单项数据流?

子组件不能改变父组件传递给它的 prop 属性,推荐的做法是它抛出事件,通知父组件自行改变绑定的值。

  • v-model 的做法是怎样的?

v-model 做法完全符合单项数据流。甚至于,它给出了一种在命名和事件定义上的规范。

众所周知 .sync 修饰符是单向数据流的另一个典型范式。

6.png

『单向数据流』总结起来其实也就8个字:『数据向下,事件向上』。

四、如何让你开发的组件支持 v-model

虽然不想说,但这确实是高频面试题。

在定义 vue 组件时,你可以提供一个 model 属性,用来定义该组件以何种方式支持 v-model

model 属性本身是有默认值的,如下:

// 默认的 model 属性
export default {
  model: {
    prop: &#39;value&#39;,
    event: &#39;input&#39;
  }
}

也就是说,如果你不定义 model 属性,或者你按照当面方法定义属性,当其他人使用你的自定义组件时,v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"

如果把 model 属性进行一些改装,如下:

// 默认的 model 属性
export default {
  model: {
    prop: &#39;ame&#39;,
    event: &#39;zard&#39;
  }
}

那么,v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"

没错,就是这么容易,让我们看个例子。

先定义一个自定义组件:

<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: &#39;ame&#39;, // 代表 v-model 绑定的prop名
    event: &#39;zard&#39; // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit(&#39;zard&#39;, newYear)
    }
  }
}
</script>

然后我们在父组件中使用该组件:

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

看看效果:

7.gif

让你的组件支持 v-model 就这么容易。

五、demo和源码

获取源码请访问github 

https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model

更多编程相关知识,请访问:编程视频!!

以上是带你深入了解vue2中的 v-model,看看如何让组件支持该语法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:掘金社区。如有侵权,请联系admin@php.cn删除
vue2与vue3中的生命周期执行顺序有什么区别vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PM

vue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

快速搞懂Vue2 diff算法(图文详解)快速搞懂Vue2 diff算法(图文详解)Mar 17, 2023 pm 08:23 PM

diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解?下面本篇文章就来带大家深入解析下vue2的diff算法,希望对大家有所帮助!

Vue中如何使用v-model.number实现输入框的数据类型转换Vue中如何使用v-model.number实现输入框的数据类型转换Jun 11, 2023 am 08:54 AM

在Vue中,v-model是用来实现双向绑定的一个重要指令,它可以让我们很方便地将用户输入的内容同步到Vue的data属性中。但是在一些情况下,我们需要对数据进行转换,比如将用户输入的字符串类型转换成数字类型,这时候就需要使用v-model的.number修饰符来实现。v-model.number的基本用法v-model.number是v-model的一个修

解决Vue报错:无法使用v-model进行双向数据绑定解决Vue报错:无法使用v-model进行双向数据绑定Aug 25, 2023 pm 04:49 PM

解决Vue报错:无法使用v-model进行双向数据绑定在使用Vue进行开发时,经常会使用v-model指令来实现双向数据绑定,但有时候我们会遇到一个问题,就是在使用v-model时会报错,无法正确进行双向数据绑定。这可能是由于一些常见的错误导致的,下面我将介绍几种常见的情况以及相应的解决方法。组件的props属性未正确设置当我们在使用组件时,如果需要通过v-

如何解决Vue报错:无法正确使用v-model进行双向数据绑定如何解决Vue报错:无法正确使用v-model进行双向数据绑定Aug 25, 2023 pm 04:13 PM

如何解决Vue报错:无法正确使用v-model进行双向数据绑定引言:Vue是一种流行的前端框架,它提供了许多方便的功能,其中包括v-model指令用于实现双向数据绑定。然而,有时候我们在使用v-model时可能会遇到一些错误,特别是在处理复杂的数据结构时。本文将介绍几种常见的v-model错误,并提供解决方案和代码示例。错误:v-model与对象属性的双向绑

Vue报错:无法正确使用v-model进行双向数据绑定,如何解决?Vue报错:无法正确使用v-model进行双向数据绑定,如何解决?Aug 19, 2023 pm 08:46 PM

Vue报错:无法正确使用v-model进行双向数据绑定,如何解决?引言:在使用Vue进行开发时,双向数据绑定是一项非常常见且强大的功能。然而,有时候我们可能会遇到一个问题,就是当我们尝试使用v-model进行双向数据绑定时,却遭遇到了报错。本文将介绍该问题的原因以及解决方案,并通过代码示例来演示如何解决该问题。问题描述:当我们在Vue中尝试使用v-model

实例详解Vue中v-model指令的用法实例详解Vue中v-model指令的用法Aug 10, 2022 pm 05:38 PM

Vue中可以使用v-model指令来实现数据双向绑定,下面本篇文章就来带大家了解一下v-model指令,希望对大家有所帮助!

Vue中使用v-model的双向绑定优化应用的数据性能Vue中使用v-model的双向绑定优化应用的数据性能Jul 17, 2023 pm 07:57 PM

Vue中使用v-model的双向绑定优化应用的数据性能在Vue中,我们经常使用v-model指令来实现表单元素与数据之间的双向绑定。这种双向绑定的方式极大地简化了开发过程,并提高了用户体验。然而,由于v-model需要监听表单元素的input事件,当数据量较大时,这种双向绑定可能会带来一定的性能问题。本文将介绍如何优化使用v-model时的数据性能,并提供一

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境