码迷,mamicode.com
首页 > 其他好文 > 详细

v-model双向绑定原理

时间:2021-01-12 11:25:03      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pac   edit   operator   www   asc   var   att   表单   利用   

v-model本质上是 :value和v-on的结合体,就是绑定他的value,通过v-on触发,从而更新数据

双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件

 

 
技术图片
 

其中observer是最主要的部分,用Object.defineProperty来实现数据的劫持,然后用他的set,get方法来通知订阅者,触发update方法,从而实现更新视图

 

 
技术图片
 

订阅者模式:每一个{{name}} v-model=‘name’都会添加一个订阅者,从而监听不同部分的变化,每一部分变化时都会循环触发相应的订阅者,更新到页面中。



作者:Free_syx
链接:https://www.jianshu.com/p/08bf29fef61d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 
 

v-model只是一个语法糖

<input v-model="something">
只是一个语法糖
<input v-bind:value="someting" v-on:input="something = $event.target.value">

相当于
<custom-input v-bind:value="something" v-on:input="something = arguements[0]"></custom-input> 
<input v-bind:value="someting" v-on:input="something = $event.target.value">

真正实现还是靠

  • 接受一个value属性
  • 在有新的value时触发input 事件

如何让v-model绑定的值接受到数据呢?

<div id="app>
	<input v-model="message" placeholder="edit me">
	<p>Message is: {{ message }}</p>
</div>
<script>
var vm = new Vue({
	el: ‘#app‘,
	methods:{
		  ......
		  //通过input事件发出数值
		  this.$emit(‘input‘, Number(formattedValue))
		}
})
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

也就是自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)

然后,给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到input事件然后把值传入到message中.

为什么是 input呢?

因为在vue中, 使用了v-model的组件会自动监听input事件,
并把这个input事件所携带的值 传递给v-model所绑定的属性.
这样组件内部的值就给到了父组件了

如何利用v-model实现自定义的表单组件:
监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit(‘input‘ ,data) 方法去触发input事件

v-model双向绑定原理

标签:pac   edit   operator   www   asc   var   att   表单   利用   

原文地址:https://www.cnblogs.com/wang--chao/p/14259550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!