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>
</>
)
}