本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.Vue（事件总线）

1.原理

让组件间共用一个基站，让他们有了一个共同的'父亲'，$emit传，$on接

2.全局

(1)创建公共基站挂载到vue实例的原型对象上

main.js

Vue.prototype.EventBus=new Vue()

注：EventBus处可设置任意名

(2)传值

  this.EventBus.$emit('函数名',参数)

(3)接收

  this.EventBus.$on('函数名',(形参)=>{
   . . .
 })

3.按需

(1)创建一个js文件当基站

import Vue from 'vue'
export default new Vue()

(2)按需引入

import EventBus from 'js文件'

(3)传值

EventBus.$emit('函数名',参数)

(4)接收

EventBus.$on('函数名',(形参)=>{
  . . .
})

二.React

1.原理

注：son为传，son2为接

  父为平台帮助传值
  父声明一个变量，son通过子传父事件传值给父
  父将值赋予给该变量，并通过父传子将值传给son2

2.父

import React from 'react'
import Son2 from './props/son2'
import Son from './props/son'

class Com extends React.Component {
  state={
    sMsg:''
  }
  fatherFn=(msg)=>{
    this.setState({
     sMsg:msg 
    })
    console.log('father',msg);
  }
  render() {
    return 
<div>
                <Son ff={this.fatherFn}></Son>
                <Son2 f={this.state.sMsg}></Son2>
 </div>
  }
}
export default Com 

3.传

注：若使用函数组件可用props.ff传

import React from 'react'

class Com extends React.Component {
  render() {
   return
<div>
      <button onClick={()=>this.props.ff('我传的')}>son</button>
</div>
  }
}
export default Com

4.接

注：若使用类组件可用this.props.f接收

import React from 'react'

const Func = (props) => {
return
<div>
       <h1>{props.f}</h1>
</div>
};
export default Func