码迷,mamicode.com
首页 > 其他好文 > 详细

vue中组件通信

时间:2019-08-26 22:48:46      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:通信   this   一个   绑定   mit   程序   fragment   数据   数据验证   

组件的通信 

  1. 父子组件通信 

 案例:

 
//父子组件通信思路
// 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定
// 2 子组件用props 接受自定义的那个:号属性

Vue.component(‘father‘,{
template:‘#father‘,
data(){//组件中一个data数据必须是一个函数
return {
money:1000
}
}
})

Vue.component(‘son‘,{
template:‘#son‘,
props:[‘hello‘]
//props:[‘money‘]
// props:{//数据验证
// ‘monery‘:Number
// }
})
 

 子父组件通信

//定义组件
Vue.component(‘father‘,{
template:‘#father‘,
data(){
return {//用来接受子组件给的数据
shou:0
}
},
methods:{//在父组件中定义事件处理程序方法 然后将父组件的方法已自定义的形式绑定在子组件身上 son
fn(da){//接受子组件参数
this.shou=da
}
}
})

Vue.component(‘son‘,{
template:‘#son‘,
data(){//先子组件的数据
return {
money:5000
}
},
methods:{
givehongbao(){
this.$emit(‘give‘,this.money)
//通过this.$emit 发送两个参数 参数1 自定义的那个方法名give 参数2子组件传的数据 money
}
}

})

vue中组件通信

标签:通信   this   一个   绑定   mit   程序   fragment   数据   数据验证   

原文地址:https://www.cnblogs.com/wanghsing/p/11415393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!