vue中input用v-model双向数据绑定后,数据是怎么传输的

Vue的v-model实现双向数据绑定依赖于数据劫持和发布-订阅者模式。当input元素使用v-model时,它同时绑定了数据和input事件。数据变化时,表单内容更新;页面数据变化,会触发事件更新数据。v-model是语法糖,相当于结合了v-bind:value和v-on:input。在组件中,v-model通过props接收父组件数据,并通过$emit触发input事件,完成父子组件间的数据双向绑定。
摘要由CSDN通过智能技术生成

大家都知道Vue可以用v-model可以实现双数据绑定,但它能实现绑定的原理到底是什么呢?比如input用v-model双向数据绑定后,数据是怎么传输的?

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的!
v-model就是通过v-bind:value=‘msg’ 绑定属性,当数据发生变化时,表单内容跟着变化;
在通过v-on:input="handel"监听事件, 当页面数据变化时,数据会通过事件根据页面数据的变化而变化; 在 通过事件处理来进行双向数据绑定的。
根据官方文档介绍,v-model本质上就是语法糖,即利用v-model绑定数据后,其实就是既绑定了数据,又添加了一个input监听事件handle

  • 自定义事件也可以用于创建支持v-model的自定义输入组件,如:
<input type="text" v-model="value">
  • 等价于:
<input 
 type="text" 
 v-bind="value"
 v-on:input="handle"
 <script>
 //...省略
  methods: {
   
    handle
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值