今天我们来谈谈在react、vue、小程序中是如何实现子父组件之间的传值通信的
React
父传子
直接通过props传值
// 父组件
const element = <h1><Child name='chuichui' /></h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
// 子组件
// 通过this.props就可以获取到从父组件传过来的值
console.log(this.props.name);
子传父
父组件将自己的一个方法通过props传给子组件，作为一个钩子，当子组件想向父组件传值，调用这个方法并传入参数，父组件便可以接收的信息
//父组件
import Child from './Child.js'；
export default class Parent extend compenent{
getData=(data)=>{
console.log(data);
}
render(){
return (
<div>
<Child getData={this.getData}/>
</div>
)
}
}
//子组件
export default class Child extend compenent{
state={
name:'chuichui'
}
render(){
const {name}=this.state;
return (
<div>
子组件
<button onClick={()=>{this.props.getData(name)}}><button>
</div>
)
}
}
Vue
在vue中直接赋值就可以重新渲染组件
// Correct
this.comment = 'Hello'
小程序
小程序实现的方式和React很类似，不能直接赋值
//Wrong
this.data.comment ='Hello'
而是需要使用setData方法
// Correct
this.setData({
comment:'Hello'
})
最后 🙌
好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~
