vue中组件通信

Posted wanghsing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中组件通信相关的知识,希望对你有一定的参考价值。

组件的通信 

  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中组件通信的主要内容,如果未能解决你的问题,请参考以下文章

vue实现组件通信的5中方式

vue组件间通信

vue中组件通信

vue组件之间的通信, 父子组件通信,兄弟组件通信

Vue 非父子组件通信方案

React组件间通信