React、Vue、小程序子父组件传值通信大比较

今天我们来谈谈在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'
})

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~