美文网首页
组件通信

组件通信

作者: clumsy钧 | 来源:发表于2019-01-05 21:38 被阅读1次

demo链接
父传子组件主要是通过props

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      result1: 0,
      result2: 0
    }
    this.t0 = new Date()
  }
  success(x){
    console.log(x)
    console.log('兔子跑完了,用时')
    let r1 = new Date() - this.t0
    this.setState({
      result1: r1
    })
  }

即把state里面的数据或者class里的方法传递给后代模板
需要注意的是方法的话需要bind this

  render(){
    return (
    <div>
      <div class="header">
        <Time1 result={this.state.result1}/>
        </div>
       <Playground success={this.success1.bind(this)}/>
    </div>
    )
  }
}

给孙组件传递同上
感觉跟之前写轮子用的单项数据流的思想相似
想来应该是vue借鉴的react

孙组件可以通过父系传递过来的方法进行回调来进行通信

相关文章

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • 组件通信

    组件通信分为几种: 父组件给子组件通信 子组件给父组件通信 兄弟组件通信 1.父组件给子组件通信 法一...

  • 组件通信

    组件关系 组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。 父子组件通信 1. 子组件使用 $emit(...

  • react之组件通信

    需要组件之进行通信的几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  • React组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • React中组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • React中组件通信

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • 第七章 可复用性的组件详解(中)

    7.7 组件通信 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信 7.7.1 自定义事件—子组件给父组件传...

  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

    Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说...

  • react 跨级组件通信

    跨级组件通信所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子组件通信。跨级组件通信可以采用下面两种方...

网友评论

      本文标题:组件通信

      本文链接:https://www.haomeiwen.com/subject/yrbdrqtx.html