零、this.props
可以接收到 外界的传值 和 此组件标签内部自定义的方法
例:
<one vals={message} sendVal={this.handleReverse.bind(this)}></one>
此时在子组件中打印this.props
this.props = {
vals : ‘**‘,
sendVal : fn
}
由此我们可以进行父子组件之间传值
一、父传子
在子组件标签中用自定义属性进行传递,接收的时候通过this.props进行接收
/* 父组件【自定义属性为 val 传的值为message】 */
1 <Fragment> 2 <one val={message}></one> 3 </Fragment>
/* 子组件【this.props对象中会出现 自定义属性,可以通过this.props.<属性名> 获取传值 】 */
1 render(){ 2 let {val} = this.props; 3 return ( 4 <Fragment> 5 <div>接收来自父组件的传值:{val}</div> 6 </Fragment> 7 ) 8 }
二、子传父
在子组件标签内部用自定义属性定义一个方法传递给子组件 子组件调用这个方法传递参数
/* 父组件 */
1 render(){ 2 return ( 3 <Fragment> 4 <one send={this.handleRevese.bind(this)}></one> 5 </Fragment> 6 ) 7 } 8 9 handleRevese(params){ 10 console.log(‘来自子组件的传值‘ + params); 11 }
/* 子组件 */
1 render(){ 2 return ( 3 <Fragment> 4 <button onClick={this.handleSend.bind(this)}>向父组件传值</button> 5 </Fragment> 6 ) 7 } 8 9 handleSend(){ 10 this.props.send(this.state.mess); 11 }
三、非父子【使用自己封装的$on $emit $off】
One组件
1 render(){ 2 return ( 3 <div> 4 <button onClick={this.handleTwo.bind(this)}>发送给Two组件</button> 5 </div> 6 ) 7 } 8 9 handleTwo(){ 10 Observer.$emit("handle",this.state.oneVal); 11 }
Two组件
1 constructor(){ 2 super(); 3 this.state = { 4 oneVal:"" 5 } 6 Observer.$on("handle",(val)=>{ 7 this.setState({ 8 oneVal:val 9 }) 10 }) 11 } 12 13 render(){ 14 let {oneVal} = this.state; 15 return ( 16 <div>接收到one组件的值为:{oneVal}</div> 17 ) 18 }
原文地址:https://www.cnblogs.com/jokehl/p/9998163.html
时间: 2024-10-07 12:13:29