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

本文链接：https://blog.youkuaiyun.com/qq_33794744/article/details/108195965

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道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(e){
     this.value=e.target.value
    }
  },
 </script>
 >

在组件上使用v-model时这回事这样：

<child-input v-bind="value" v-on:input="handle">
</child-input>

当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定，代码如下：

<!-- 父组件 -->
<template>
	<view class="app">
		<Children
		 v-model="num"
		 />
	</view>
</template>

<script>
	import Children from './Children.vue'
	export default {
		components: {Children},
		data() {
			return {
				num:0
			}
		},
	}
</script>

<!-- 子组件 -->
<template>
	<view @click="handle()"></view>
</template>

<script>
	import Children from './Children.vue' //button
	export default {
		props: ["value"],
		data() {
			return {
				num:0
			}
		},
		methods:{
			handle(){
				this.$emit("input",value+1)
			}
		}
	}
</script>

通过v-bind把父组件的数据绑定到了子组件的props属性中，而在props上默认用value取值，然后通过$emit触发事件input，因为v-model绑定的事件是input，故在子组件上触发了父组件的input事件，通过触发事件来进行传值，实现了父子组件数据的双向绑定，相对于直接使用v-bind以及自定义事件代码量有所减少