Vue组件通信和React组件通信的方法

Vue组件之间的通信

父子通信

在vue中，父子通信，就是数据存放在父组件中，然后子组件根据父组件的数据变化来变化，那么就要想办法将父组件的数据传递给子组件。在父组件中使用子组件，然后在子组件标签上通过“ ：属性 = ‘属性值’ ”来写一个自定义属性，就可以将父组件的属性传递给子组件，然后在子组件中通过“ props:[’属性‘] ”来接收，然后在子组件标签内就可以直接使用属性了，但是只能使用不能修改，这是父子通信。

子父通信

子父通信就是在子组件中修改父组件的属性，但是不能直接做修改，在vue中自己的属性只能自己修改，所以要在父组件写一个修改父组件属性的方法，然后在子组件标签上使用自定义方法“@自定义方法名称 = ’方法‘”将父组件的方法传递给子组件，然后再子组件内部写一个自己的方法，在自己的方法内用this.$emit(‘自定义方法名称’，“参数”)来触发父组件的方法来改变父组件的属性。

兄弟通信

兄弟通信又分为两种方法，状态提升，亲兄弟通信，就是将属性放在亲兄弟共同的父组件上，然后结合父子通信和子父通信来互相通信。非亲兄弟之间通信主要是通过时间总线的方法，就是创建一个全局的vue空实例 let vue = new Vue()，然后再其他组件内部，通过"vue.$on{(}^{\prime }方法别{名}^{\prime }，“方法”)"将组件内部的方法注册到空实例里，然后再任何组件里只要能访问到这个空实例，通过“vue.$emit(‘方法名’)”，就能使用空实例里的方法。

React组件之间的通信

父子通信

在react中父子通信跟vue有些区别，通过props传参，在子组件标签上通过自定义属性“ 属性名=’{this.state.变量名}‘ ”将值传递给子组件，然后在子组件内部通过 “this.props.属性名” 来接收。

子父通信

在父组件中写一个修改自己属性的方法，然后在子组件标签上通过自定义方法“ 方法别名 = {this.方法名} ”传递给字组件，在子钻进内部也是通过“ this.props.方法别名 ”来触发方法。
PS:在react中，引用方法不能加括号，否则会自动执行，是不可控的，那么如果想传参数的话就要使用bind来绑定，“ this.props.方法别名.bind(null，参数1，参数2) ”

兄弟通信

例如A组件和B组件之间要进行通信,先找到A和B公共的父组件,A先向C组件通信,C组件通过props和B组件通信,此时C组件起的就是中间件的作用。
context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;
但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.

PS:给大家推荐一篇文章，能帮助大家更好的理解context。

https://www.jianshu.com/p/eba2b76b290b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation