浅谈Vue v-model实现原理,如何封装,以及封装方法

2018-04-24 admin

最近在封装组件,我整理了一些封装方法,感谢我司的前端团队,如果还有更好的方法,欢迎来稿,欢迎切磋。

一、v-model的原理

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?

1.语法糖:使用v-model来进行数据双向绑定如下:

<input v-model="ying">

2.实际上是这样实现的:

<input v-bind:value="ying" v-on:input="ying=$event.target.value">
<a-input v-bind:value="ying" v-on:input="ying=arguments[0]"></a-input>

3.其实v-model只不过是一个语法糖而已,真正的实现靠的还是

(1) v-bind:绑定响应式数据 (2) 触发 input 事件 并传递数据 (重点)

二、方法

父子组件通信,都是单项的,很多时候需要双向通信。方法如下:

  1. 父组件使用:text.sync=“aa” 子组件使用$emit(‘update:text’, ‘text改变后的值’)
  2. 父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身。
  3. 父组件使用: v-model,子组件使用通过监听value和暴露input事件来实现v-model
  4. 父组件使用: v-model 子组件使用model

(1)使用sync

父组件:

<a-input :value.sync="text" ></a-input>

子组件:

<template>
 <div>
     <input v-model="currentValue" @input="handleModelInput">
 </div>
</template>
<script>
 export default {
  props: { 
    value: [String,Number,Date],
  },
  methods: {
       handleModelInput() {
         this.$emit("update:value", this.currentValue);
       }
  },
  watch: {
     value(newValue) {
         this.currentValue = newValue
     }
</script>

(2)使用v-model 子组件触发 input 事件 并传递数据,并对value进行监听

父组件:

<a-input v-model="text">

子组件:

<input v-model="currentValue" @input="handleModelInput">
props:{
    value:[String,Number],
}
handleModelInput() {
    this.$emit('change',this. currentValue)
}
watch: {
    value(newValue) {
        this.currentValue = newValue
    }
},

(3)使用model prop属性 even事件change

父组件:

<a-input v-model=“text”>


子组件:
<template>
 <div>
     <input v-model="currentValue" @input="handleModelInput">
 </div>
</template>
<script>
 export default {
  model: {  
   prop: 'value',
   event: 'change'
  },
  props: {
    value:[String,Number], 
  },
  methods: {
   handleModelInput() {
      this.$emit('change', this.currentValue)
   }
  },
watch: {
    value(newValue) {
        this.currentValue = newValue
    }
 }
</script>

码字辛苦,文章如对您有帮助,麻烦支持点赞~

原文链接:https://segmentfault.com/a/1190000014550667

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-30460.html

文章标题:浅谈Vue v-model实现原理,如何封装,以及封装方法

相关文章
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
回到顶部