vue&react组件通信

一、父子组件通信

VUE父子组件通信

1.props / emit

父->子：通过props进行传递数据给子组件
子->父：通过emit向父组件传值

2.children/parent

通过parent/children就可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data

react父子组件通信

1.props / emit

父->子：通过props进行传递数据给子组件
子->父：通过调用父组件传过来的函数并传入参数

总结父子组件通信

父传子 方式基本相同 形式不同，都是通过props
子传父 方式基本相同形式不同，都是通过绑定事件
Vue 多一些实例上面的方法 可以在父组件调用子组件实例，在子组件调用父组件实例
其实 React 的 子传父 在Vue里面也是可以用的

二、隔代组件通信

vue隔代组件通信

1.普通传递

爷传孙

爷组件通过正常的props向下传递 子组件使用 $attrs接受(子组件没 接收的数据会继续向下传递)，最后在孙组件通过props接受

孙传爷

孙组件通过 this.$emit() 将事件向上传递 在子组件 使用$listeners 接受事件(子组 件没接收的数据会继续向上传递)，爷组件通过调用自定义事件 接受参数

孙传爷补充

既然爷传孙已经实现了，那么这时候可以传递一个函数 通过调用这个函数传入参数传递数据

2.provide/inject

通过父组件定义provide将组件实例向下传递，在后代的所有组件里面 都能通过inject 调用该实例的方法
属性

React隔代组件通信

Context 生产者-消费者模式

1.引用React 里面的一个方法createContext执行并将返回值 并且暴露出去

import React from 'react';
export const MyContext=React.createContext()
父组件里面引用该方法返回值里面的一个属性
import {MyContext}  context'
const {Provider}=MyContext
<Provider  value={{car1,car2,car3,changeCar1:this.changeCar1}}>
	<Child car1={car1} changeCar={this.changeCar}></Child>
</Provider>
复制代码

2.在子组件里面使用

import {MyContext} from '../../context'
在组件内部定义一个静态方法  注意 contextType 不能变
static contextType = MyContext
复制代码

这时候就能够通过在组件内部调用 this.context 使用 父组件传过来的方法
第二种调用方法 就不需要定义静态方法

<MyContext.Consumer>
    {value => (value.smallCar)} // value就是context中的value数据
/MyContext.Consumer>
复制代码

三、状态集中式管理

VueX

Vuex是vue配套的公共数据管理工具，我们可以将共享的数据保存到Vuex中

1.方便整个程序中任意组件都可以获取并且修改vuex中保存的数据

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

2.VueX包含以下几个部分

• state，驱动应用的数据源；
  复制代码

• mutations  更改 Vuex 的 store 中的状态的唯一方法
  复制代码

• actions  响应在 view 上的用户输入导致的状态变化。
  复制代码

• getters  从store 中的 state 中派生出一些状态
  复制代码

• modules  将 store 分割成模块
  复制代码

3.如何配置定义vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {状态数据},
  mutations: {改变数据的方法},
  actions: {复杂的修改方法},
  getters:{数据重新加工输出}，
  modules: {多个store统一加载}，
})
复制代码

4.如何使用vuex里面的状态

组件里面可以通过 this.$store.state 与this.$store.getters 调用state 与getters,也可以通过 Vuex 里面提供的方法 mapState mapMutations

mapState([key])  mapMutations([eventName])
mutations 的方法可以通过 this.$store.commit(eventName,parms)
actions 的方法可以通过  this.$store.dispatch(eventName,parms)
复制代码

redux

redux是一个专用与状态管理的js库，可以用于vue，react，angular
redux不是专门用于react 的库，而是一个通用的库，他与react没任何关系，知识react 用它用的比较多，Redux 是一个专门用来做状态管理的js库 类似与 Vuex
基本上就是配合 React 使用
将 需要被多方使用到的状态 交到Redux里面 需要的时候 直接取出来 共享使用

1.redux 的使用

创建 stroe.js 文件 只需要一个

 import {createStore} from 'redux'  
//引入createStore 用于创建 store
     import countReduce from './count_reduce' 
//创建需要传入 参数 countReduce
    export default createStore(countReduce) 
复制代码

//创建并且传入参数 并且暴露出去
创建reduce.js文件—count_reduce.js

export default function (state='自行车',action){
	const {type,data}=action
	switch(type){case 'change':
		return data
		default:
		return state}}
复制代码

前面已经定义好了redux 那么如何使用呢？

可以通过 store.getState() 获取状态

改变值 store.dispatch({type:’add’,data:value}) 第一个传过去的状态 第二个 去进行计算的值

渲染页面 因为虽然通过上面方法改变了redux的值 但是页面并没有重新渲染

componentDidMount(){  //页面挂载  就开始监听 store
    store.subscribe(()=>{
        console.log('store任意状态改变的时候调用该方法')
        this.setState({})  //调用setState 使页面重新渲染  有效率问题
}) }
复制代码

四、Vue事件总线（EventBus）

** vue -eventBus**

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次
如何使用

1.在入口文件 main.js里面 定义一个 bus

Vue.prototype.$bus=new Vue()
复制代码

2.数据传递

this.$bus.$emit(eventName,params)
复制代码

3.数据接受

在mounted 里面 绑定事件

this.$bus.$on(eventName,(val)=>{this.msg=val})
复制代码

4.其他方法

你也可以使用 this.$bus.$off(‘aMsg’) 来移除应用内所有对此某个事件的监听。或者直接调用
this.$bus.$off() 来移除所有事件频道，不需要添加任何参数 。

五、消息订阅与发布

消息订阅与发布其实有很多组件库 pub-sub event 等等
它其实是一个js库 所以在vue react angular里面都可以使用，
但是基本不会在vue里面使用

最后总结

都是我自己总结出来的 React 用的不多 了解的不深 有什么遗漏或者错误 希望各位指正···