Vue中子组件与父组件之间的双向绑定

最新推荐文章于 2025-07-09 16:11:33 发布

原创最新推荐文章于 2025-07-09 16:11:33 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个简单的按钮加减计数器应用。通过子组件与父组件的数据传递及事件触发机制，实现计数器的加一和减一功能。文中详细解释了组件注册、事件绑定、数据监听等关键步骤。

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

这里写一个小的demo就是通过一个Button子组件实现value的加一减一，如图

首先给个根节点，id为app的div

		<div id="app"></div>

首先全局注册组件my-com:

				Vue.component('my-com',{
			template:'<div><button>+1</button></div>'
		})

new一个vue对象：

		new Vue({
			el:'#app'
		})

给组件my-com, 一个props以便父组件向子组件传数据，设置currentvalue为初始数据，添加绑定事件handleClick

				Vue.component('my-com',{
			props:{
				value:{
					type:Number
				}
			},
			template:'<div>{{currentvalue}}<button @click="handleClick">+1</button></div>',
			data(){
				return{
					currentvalue:this.value
				}
			},
			methods:{
				handleClick(){
					this.currentvalue++;
					this.$emit('input',this.currentvalue);//用于子组件向父组件触发事件，这里前面必须填input
				}
			}
		});

在父组件里添加value字段

				new Vue({
	 		el:'#app',
			data:{
				value:1
			},
			methods:{
				handleReduce(){
					this.value--;
				}
			}
		})

在div里添加放入my-com组件，并且双向绑定value

		<div id="app">
			<my-com v-model="value"></my-com>
		</div>

通过以上的操作，我们的加就写好了，现在我们写减，通过父组件的改变，同样改变子组件里的值

在div里添加一个button,前面放一个value值用来观察数据变化，绑定一个handleReduce事件

		<div id="app">
			<my-com v-model="value"></my-com>
			{{value}}<button @click="handleReduce">-1</button>
		</div>

在父组件里添加handleReduce方法

				new Vue({
			el:'#app',
			data:{
				value:1
			},
			methods:{
				handleReduce(){
					this.value--;
				}
			}
		})

然后，这样减就写好了但是我们发现一个问题，就是点击减之后，子组件里的值不能跟着变化，如图：

那怎么办呢？我们要在子组件中加入watch来监听变化重新赋值！

			watch:{
				value(val){
					this.currentvalue=val;
				}
			}