v-model数据双向绑定原理

VUE 专栏收录该内容
1 篇文章 0 订阅

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> 

真正实现还是靠

  • 接受一个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>

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

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

为什么是 input呢?

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

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

  • 2
    点赞
  • 2
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

__sunny___

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值