本篇文章给大家带来的内容是关于php协成实现的详解(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、子组件给父组件传递数据
父组件：{{total}}
Vue.component('son-component',{
template:'
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
},
})
通过v-bind动态绑定父组件中要传递的数据，子组件通过props属性接收父组件传递的数据。
2.父组件给子组件传递数据
{{total}}
Vue.component('son-component',{
template:'点击我向父组件传值',
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
}
}
})
自定义一个事件，在子组件中通过this.$emit()触发自定义事件并给父组件传递数据，在父组件中监听自定义事件并接收数据。
3.非父子组件之间的通信
Vue.component('a-component',{
template:`
a组件的数据：{{num}}
击我向b组件传递数据
`,
data(){
return {
num:1
}
},
methods:{
sendData:function(){
this.$root.bus.$emit('change',this.num)
}
}
})
Vue.component('b-component',{
template:`
`,
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()
},
})
611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
