1、父传子
父传子很简单，父组件以属性形式将值传递给子组件即可：

// 父组件

import Sub from './Sub'

let msg = "你好世界"

export default function App(){

    return <Sub msg={msg} />

}

// 子组件

export default function Sub(props) {

  return <h2>{props.msg}</h2>

}

2、子传父
子传父的本质是父组件创建好方法，然后传递到子组件调用：

// 父组件

import Sub from './Sub'

let msg = "你好世界"

export default function App(){

    const fn = function(arg){

        console.log(arg) // 123

    }

    return <Sub msg={msg} fn={fn}  />

}

// 子组件

export default function Sub(props) {

  return (

      <>

        <h2>{props.msg}</h2>

        <button onClick={()=>props.fn(123)}>将123传递给父组件</button>

      </>

  )

}