最详细的vue的父子组件以及非父子组件之间的通信方式

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

父组件数据如何传递给子组件呢?可以通过props属性来实现
父组件:
//这里必须要用 - 代替驼峰
data(){ return { msg: [1,2,3] }; }
子组件通过props来接收数据: 方式1:
props: ['childMsg']
方式2 :
props: { childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告 }
方式3:
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 } }
这样呢,就实现了父组件向子组件传递数据.

【案例演示1】
父组件里面的内容
image.png
子组件里面的内容
image.png
注意:这里的第一个父组件传值给子组件分为传引用和传值两种方式,传引用的时候改变引用关系,则子组件的也会变化(改变父组件中数组的引用时可以看到子组件的props数组随之改变,而子组件中绑定的数组确并没有随之改变)传值则不会
2.子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.
子组件: <div @click="up">
methods: { up() { this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据 } }
父组件:
//监听子组件触发的upup事件,然后调用change方法
methods: { change(msg) { this.msg = msg; } }

【案例演示2】
父组件里面的内容
image.png
子组件里面的内容
image.png

注意:简而言之就是先子组件定义一个事件,然后通过$emit方式
传递过去一个事件名称,,父组件首先在html上用@事件名######="子组件自定义事件名"来接受,最后就是调用父组件刚刚定义的######事件,传入一个参数,就可以接收来自子组件的事件触发及其参######数传递。
大家可以参考这篇文章https://www.cnblogs.com/LoveAndPeace/p/7273648.html

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
let Hub = new Vue(); //创建事件中心
组件1触发:
methods: { eve() { Hub.$emit('change','hehe'); //Hub触发事件 } }
组件2接收:
created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }
这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!
以下是详细代码
<meta charset="utf-8">

Vue 官网介绍了非父子组件通信方法:

image

不过官网说的太简单了,新手看完估计还是一脸懵逼。还有这个空的 Vue 实例放到哪里合适也值得商榷。

这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值