父子组件的数据传递（计数器功能）

最新推荐文章于 2024-07-09 17:38:54 发布

原创最新推荐文章于 2024-07-09 17:38:54 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

vue.js框架专栏收录该内容

13 篇文章

订阅专栏

本文通过一个简单的计数器例子，展示了在Vue.js中如何进行父子组件间的数据传递。使用props从父组件向子组件传递初始值，并通过事件（@inc）将子组件的修改通知回父组件，更新父组件的状态。同时，还演示了如何在子组件上绑定原生事件。

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>父子组件的数据传递</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<counter :count="2" @inc="handleIncrease"></counter>
<counter :count="5" @inc="handleIncrease"></counter>
<div >{{total}}</div>
<counter @click.native="handleClick">给组件绑定原生事件，父组件写方法</counter>
</div>

<script>

var counter ={
props:['count'],
data:function(){
return{
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++;
this.$emit('inc',1)
}
}
}

var vm = new Vue({
el:'#root',
data:{
total:7
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){
this.total+=step
}
}

})

</script>

</body>
</html>