1.父组件给子组件传递数据
<body>
<div id=\"app\">
父组件：{{total}}
<br>
<son-component v-bind:total=\"total\"></son-component>
</div>
< >
Vue.component(\'son-component\',{
template:\'<div>子组件：{{total}}+{{num}}={{add}}</div>\',
props:{
total:Number
},
data(){
return {
num:10
}
},
computed:{
add:function(){
return num=this.total+this.num
}
}
})
var app=new Vue({
el:\'#app\',
data:{
total:1
},
})
</ >
</body>
通过v-bind动态绑定父组件中要传递的数据，子组件通过props属性接收父组件传递的数据。
2.子组件给父组件传递数据
<body>
<div id=\"app\">
<son-component v-on:change=\"getData\"></son-component>
<br>
{{total}}
</div>
< >
Vue.component(\'son-component\',{
template:\'<button v-on:click=sendData>点击我向父组件传值</button>\',
data(){
return{
count:1
}
},
methods:{
sendData:function(){
this.$emit(\'change\',this.count)
}
}
})
var app=new Vue({
el:\'#app\',
data:{
total:1
},
methods:{
getData:function(value){
this.total=this.total+value
}
}
})
</ >
</body>
自定义一个事件，在子组件中通过this.$emit()触发自定义事件并给父组件传递数据，在父组件中监听自定义事件并接收数据。
3.非父子组件之间的通信
<body>
<div id=\"app\">
<a-component></a-component>
<b-component></b-component>
</div>
< >
Vue.component(\'a-component\',{
template:`
<div>
<span>a组件的数据：{{num}}</span><br>
<button v-on:click=\"sendData\">击我向b组件传递数据</button>
</div>
`,
data(){
return {
num:1
}
},
methods:{
sendData:function(){
this.$root.bus.$emit(\'change\',this.num)
}
}
})
Vue.component(\'b-component\',{
template:`
<div>b组件接收a组件数据后相加的数据：{{count}}</div>
`,
data(){
return {
count: 10
}
},
created:function(){
this.$root.bus.$on(\'change\',(value)=>{
//alert(value)
this.count=this.count+value
})
}
})
var app=new Vue({
el:\'#app\',
data:{
bus:new Vue()
},
})
</ >
</body>
继续阅读与本文标签相同的文章
-
史上最详细Java内存区域讲解
2026-05-19栏目： 教程
-
Hystrix Dashboard：断路器执行监控
2026-05-19栏目： 教程
-
AGV为什么要选择视觉导航
2026-05-19栏目： 教程
-
《Absolute Java 中文版》| 每日读本书
2026-05-19栏目： 教程
-
汽车圈微信聊天记录大曝光
2026-05-19栏目： 教程