vue开发:vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件

父组件数据如何传递给子组件呢?可以通过props属性来实现

父组件:

?
1
2
3
4
5
6
7
8
<parent>
   <child :child-msg= "msg" ></child> //这里必须要用 - 代替驼峰
</parent>
data(){
   return {
     msg: [1,2,3]
   };
}

子组件通过props来接收数据:

方式1:

?
1
props: [ 'childMsg' ]

方式2 :

?
1
2
3
props: {
   childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

方式3:

?
1
2
3
4
5
6
props: {
   childMsg: {
     type: Array,
     default : [0,0,0] //这样可以指定默认的值
   }
}

这样呢,就实现了父组件向子组件传递数据.

2.子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.

子组件:

?
1
2
3
4
5
6
7
8
<template>
   <div @click= "up" ></div>
</template>
methods: {
   up() {
     this .$emit( 'upup' , 'hehe' ); //主动触发upup方法,'hehe'为向父组件传递的数据
   }
}

父组件:

?
1
2
3
4
5
6
7
8
<div>
   <child @upup= "change" :msg= "msg" ></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
   change(msg) {
     this .msg = msg;
   }
}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

?
1
let Hub = new Vue(); //创建事件中心

组件1触发:

?
1
2
3
4
5
6
<div @click= "eve" ></div>
methods: {
   eve() {
     Hub.$emit( 'change' , 'hehe' ); //Hub触发事件
   }
}

组件2接收:

?
1
2
3
4
5
6
<div></div>
created() {
   Hub.$on( 'change' , () => { //Hub接收事件
     this .msg = 'hehe' ;
   });
}

这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!

以上所述是小编给大家介绍的vue2.0父子组件及非父子组件之间的通信方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值