组件之间的通讯

一、react组件之间的几种通信方式

1、父子通讯

父组件通过prop传递数据给子组件，子组件通过调用父组件传过来的函数传递数据给父组件，这两种方式都是最常用的父子通讯的实现方法。

这种父子通信方式也就是典型的单向数据流，父组件通过props传递数据，子组件不能直接修改props，而是必须通过调用父组件函数的方式告知父组件修改数据。

2、兄弟组件通讯

对于这种情况可以通过共同的父组件来管理状态和事件函数。比如说其中一个兄弟组件调用父组件传递过来的事件函数修改父组件中的状态，然后父组件将状态传递给另一个兄弟组件。

3、跨多层次组件通讯

如果是使用react16.3以上的版本的话，对于这种情况就可以使用context API

//创建Context，可以在开始就传入值
const StateContext = React.createContext()
class Parent extends React.Component{
    Render() {
        return (
            
        )
    }
}

4、任意组件

这种方式可以通过Redux 或者 Event Bus 解决，另外如果你不怕麻烦的话，可以使用这种方式解决上述所有的通信情况。

二、vue组件之间的几种通信方式

props 和$emit,

$parent 和 children,

root 获取根实例,

provide/inject,

ref/refs,

vuex(状态管理),

localStorage和sessionStorage。