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

时间: 2018-04-24阅读: 11506标签: 封装作者: 转载

一、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?utm_source=channel-hottest


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/701

关闭

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。获取元素的属性的函数并进行了兼容性处理:

ant design vue 表格a-table二次封装,slots渲染问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染

微信和支付宝中的一些常用方法封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

JS封装getScroll函数 & 案例:固定导航栏

封装getScroll函数:1. 获取页面向上或者向左卷曲出去的距离的值,2. 浏览器的滚动事件。固定导航栏获取scrollTop值后判断高度大于导航栏的高,就设置样式固定住

原生js实现ajax的封装

ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

fetch请求二次封装

JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!