vue 和react中子組件分別如何向父組件傳值

vue子組件和父組件雙向傳值：

 

子：

Vue.component("childComponent",{
template:`<div><p @click='postData'>向父組件傳值:點擊我</p>{{result?'開':'關'}}<p @click='handleData'>子組件改變父組件的數值</p></div>`,
props:{
result:Boolean,
changeData:Function
},
data(){
return{
message:'從子組件傳過來的數據'
}
},
methods:{
postData(){
this.$emit('receiveData',this.message)
},
handleData(){
this.changeData()
}

}
});

 

父：

 

const app = new Vue({
el: '#app',
router,
data:{
results:true,//開關狀態數據
ChildData:'',
changedatas:'哈哈哈哈'
},
methods:{
change(){
this.results=!this.results;
},
FromChildData(data){
this.ChildData = data
},
handleData(){
this.changedatas +=2
}
},
components: { App },
template: `
<div id="app">
<p>changedatas:{{changedatas}}</p>
<p>接收子組件的數據:{{ChildData}}</p>
<childComponent :result="results"
:change-data="handleData"
@receiveData="FromChildData"></childComponent>
<input type="button" value="change me 開 關" @click="change">
</div>
`
})

 

 

react子組件和父組件雙向傳值：

父：

import React, { Component } from 'react';
import AppChild from './child.js'
class AppParent extends Component {
constructor(props){
super(props);
this.state = {
parentData: '從父組件過來的數據',
childData:'初始化數據'
};
}
handleChildData = (childData) => {
this.setState({
childData:childData
})
};
render() {
let parentData = this.state.parentData;
let childData = this.state.childData;
return (
<div className="parent">
<p>接收來自子組件傳來的數據：{childData}</p>
<AppChild parentData={parentData} onChildDataChange={this.handleChildData}></AppChild>
</div>
);
}
}

export default AppParent;

 

子：

import React, { Component } from 'react';
class AppChild extends Component {
constructor(props){
super(props);
}
handleData = (e) =>{
// 接受父組件傳遞過來的函數，調用並傳值給父組件
this.props.onChildDataChange(e.target.value)
};
render() {
return (
<div className="child">
AppChild
輸入傳入父組件的數據：<input type="text" value={this.props.childData} onChange={this.handleData}/>
<p>{this.props.parentData}</p>
</div>
);
}
}

export default AppChild;