站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-01-06 [网络编程]作者:fabuyuan 浏览:5 次

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

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

阅读本文

你将:

  • 弄明白: 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 元素:

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

  • select 下拉框:

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

  • input type='radio' 单选框:

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

  • input type='checkbox' 多选框:

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

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

二、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,猜一猜当你输入时会发生什么?

看效果:

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

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

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

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

2.1 v-model 是双向绑定吗?

是,网说是。

『你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。』 —— vue2网文档

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

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

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

  • 什么是单项数据流?

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

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

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

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

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

『单向数据流』总结起来其实也就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
    }
  }
}

看看效果:

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

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

五、demo和源码

获取源码请访问github

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

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

以上就是带你深入了解vue2中的 v-model,看看如何让组件支持该语法的详细内容,更多请关注站长家园其它相关文章!

本文标签:  vue2v-model

转载请注明来源:带你深入了解vue2中的 v-model,看看如何让组件支持该语法

本文永久链接地址:https://www.adminjie.com/post/7257.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    • 如何将css文件设置为utf-8

      如何将css文件设置为utf-8

      在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset"UTF-8";...

    • css怎么设置按钮中的字大小

      css怎么设置按钮中的字大小

      css设置按钮中字体大小的方法:1、给按钮元素添加class属性并设置属性值;2、使用class选择器选中按钮元素,添加“font-size:数值px;”样式即...

    • javascript标识符不能以什么开头

      javascript标识符不能以什么开头

      在javascript中,标识符不能以数字开头,即第一个字符不能为数字,必须是字母、下划线“_”或美元符号“$”,其后的字符可以是字母、数字或下划线、美元符号;...

    • javascript中跳转语句有哪两种

      javascript中跳转语句有哪两种

      javascript中的两种跳转语句:1、break语句,用于退出循环或者退出一个switch语句,让程序继续执行循环之后的代码,语法“break;”;2、co...

    热门文章