大家好，又见面了，我是你们的朋友全栈君。
一、子向父组件传值
方法一:
父组件
//方法
parentFn(data1, data2, e) {
// 按照参数排列 最后一个是event
console.log(data1, data2, e) //输出 1 2 event内容
}
//渲染
render() {
return (
//子组件
)
}
子组件
// 渲染
render() {
return (
//可以直接获取props调用 也可以重新定义在方法中调用
子组件
);
}
方法二:
参考 通过ref获取子组件的值 可以看 `二、子组件向父组件传方法二` 一样的意思
二、子组件向父组件传方法
方法一:传值绑定this
父组件
//父 – 点击调用 子
clickChild = (e) => {
this.child.myChild()
}
//渲染
render() {
return (
//子组件
{this.child = ref}} }>
//点击调用
click
)
}
子组件
//周期
componentDidMount() {
this.props.onRef(this)
}
//给父组件用的方法
myChild = () => log(‘父调子fn’)
// 渲染
render() {
return (
子组件
);
}
方法二:直接绑定ref
父组件
//父 – 点击调用 子
clickChild = (e) => {
this.refs.SideContent.myChild();
}
//渲染
render() {
return (
//子组件
//点击调用
click
)
}
子组件
//给父组件用的方法
myChild = () => log(‘父调子fn’)
// 渲染
render() {
return (
子组件
);
}
三、父向子传值
父组件
//渲染
render() {
return (
//子组件
)
}
子组件
// 渲染
render() {
return (
子组件 {this.props.name}
);
}
四、父向子传方法
参考 `一、子向父组件传值方法一` 一样的 传个方法过去 子组件调用了 就是掉了父的方法了
五、兄弟组件传值 / 各种组件传值 封装的像vue的Bus中央事件总线 及其优秀
有兴趣的可以看一下 https://www.cnblogs.com/chen-yi-yi/p/11152391.html vue的bus传值
记得两个组件中 都需要引入js 使用方法如下
传值
eventProxy.trigger(‘名字’, 值)
取值
eventProxy.on(‘名字’, 值 => {
log(值)
this.setState({
//更新的state 或者干点别的
}, () => {
//做你想做的事
})
})
如果传多个值 可以拼成对象 或者 写成数组 这个js不支持序列传值
例如:
传值
eventProxy.trigger(‘名字’, [‘1′,’2’])
取值
eventProxy.on(‘名字’, resArr => {
log resArr[0] //输出1
log resArr[1] //输出2
})
这个封装的js也不是我写的 不记得哪位大佬了 几个月以前使用的 如果是你的 可以留下链接 我在贴原处
js 地址:我放在另一个页 不然太多了
https://www.cnblogs.com/chen-yi-yi/p/13566856.html
这个方法我特别喜欢~~~ 经常使用
六、redux
简单的传值满足不了你的需求 或者 当多个组件共用一个数据 频繁传值时 使用redux 状态管理器
第一步安装:npm install –save redux
第二步: -‘嘻嘻’ -下次单独写一篇~~~~
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145708.html原文链接：https://javaforall.cn
