目录
组件通信的意义
结构准备
通过Props通信
父子通信
父传子
子传父
兄弟组件通信
第三方库的消息订阅与发布
父传子
兄弟传
组件通信的意义
1） 组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state）
2）组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据
3）为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信
1- 父子关系 - 最重要的
2- 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信
3- 其它关系 - mobx / redux / zustan
结构准备
首先准备几个组件
头部:
主要:
脚部:
App外壳引入
可以看到整体结构,Header,List,Foot三个组件为并列关系的兄弟组件,
List和Item是包含与被包含的父关系组件,Header,List,Foot和App的父子关系这里不做演示
通过Props通信
父子通信
父传子
首先演示父子组件的通信
在list组件中定义数据进行传递到子组件
可以看到子组件Item拿到了父组件List传递的数据
添加下唯一标识key就不会报上面图片中的错误了
子传父
子组件也可以传递数据到父组件,子组件通过调用父组件定义的回调函数来把子组件的数据传递到父组件中
提前在父组件中定义好回调函数
子组件定义测试数据后通过props调用父组件的回调函数
测试
这里子组件被渲染了4次所以会传四次,只做子传父通信演示用
可以看到父组件打印出了子组件传递的参数
兄弟组件通信
兄弟间组件通信的话通俗点来说就是可以找一个连接兄弟俩的桥梁,间接地实现兄弟间的组件通信
兄弟组件之前的桥梁很明显就是父组件了
比如A和B是兄弟组件,C是父组件,A和B通信的话,就需要A将数据传递给C,C再讲数据传递给B
A(子)=>C(父)=B(子)
拆分下的话其实还是子传父,父再传子
这里将list组件中的数据传递给header,由header组件将数据打印
第三方库的消息订阅与发布
第三方库有许多 这里以 pubsub-js为例
输入命令安装: npm i pubsub-js
安装后导入进行使用
import PubSub from 'pubsub-js'
发布消息格式
Pubsub.publish('消息名',数据)
订阅消息格式
PubSub.subscribe('消息名',(message(消息,一般作用不大可以使用_代替),数据)=>{
})
这种方式可以实现任意组件间的通信 这里只演示父子和兄弟的
父传子
不要在意页面的渲染,这里只关注数据的传递
兄弟传
在上面的父组件基础上调整即可,还是list进行发布不用更改,在Header兄弟组件中进行订阅即可
