本篇文章带大家了解一下vue2中的 v-model,看看v-model 是双向绑定还是单向数据流,如何让你开发的组件支持 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
元素:
-
select
下拉框:
-
input type='radio'
单选框:
-
input type='checkbox'
多选框:
在编程思想上,这种帮助使用者『隐藏细节』的方式叫封装。
二、v-model 仅仅是语法糖吗?(冷知识)
v-model
不仅仅是语法糖,它还有副作用。
副作用如下:如果 v-model
绑定的是响应式对象上某个不存在的属性,那么 vue
会悄悄地增加这个属性,并让它响应式。
举个例子,看下面的代码:
// template中: <el-input v-model="user.tel"></el-input> // 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 指令在表单 d5fd7aea971a85678ba271703566ebfd
、4750256ae76b6b9d804861d8f69e79d3
及 221f08282418e2996498697df914ce4e
元素上创建双向数据绑定。』 —— vue2官方文档
2.2 那 v-model
是单向数据流吗?
是的,它甚至是单向数据流的典型范式。
虽然官方没有明确表示这点,但我们可以捋一捋两者的关系。
- 什么是单项数据流?
子组件不能改变父组件传递给它的 prop
属性,推荐的做法是它抛出事件,通知父组件自行改变绑定的值。
-
v-model
的做法是怎样的?
v-model
做法完全符合单项数据流。甚至于,它给出了一种在命名和事件定义上的规范。
众所周知 .sync
修饰符是单向数据流的另一个典型范式。
『单向数据流』总结起来其实也就8个字:『数据向下,事件向上』。
四、如何让你开发的组件支持 v-model
虽然不想说,但这确实是高频面试题。
在定义 vue
组件时,你可以提供一个 model
属性,用来定义该组件以何种方式支持 v-model
。
model
属性本身是有默认值的,如下:
// 默认的 model 属性 export default { model: { prop: 'value', event: 'input' } }
也就是说,如果你不定义 model
属性,或者你按照当面方法定义属性,当其他人使用你的自定义组件时,v-model="foo"
就完全等价于 :value="foo"
加上 @input="foo = $event"
。
如果把 model
属性进行一些改装,如下:
// 默认的 model 属性 export default { model: { prop: 'ame', event: 'zard' } }
那么,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: 'ame', // 代表 v-model 绑定的prop名 event: 'zard' // 代码 v-model 通知父组件更新属性的事件名 }, methods: { playDota2(step) { const newYear = this.ame + step this.$emit('zard', newYear) } } } </script>
然后我们在父组件中使用该组件:
// template中 <dota v-model="ti"></dota> // script中 export default { data() { return { ti: 8 } } }
看看效果:
让你的组件支持 v-model
就这么容易。
五、demo和源码
获取源码请访问github
https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model
更多编程相关知识,请访问:编程视频!!
以上是带你深入了解vue2中的 v-model,看看如何让组件支持该语法的详细内容。更多信息请关注PHP中文网其他相关文章!

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

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

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

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

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

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

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

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


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

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

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