1. 程式人生 > >vue 和react中子組件分別如何向父組件傳值

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

AC ssa 傳值 received message methods std 狀態 route

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

子:

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

父:

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

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

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