vue 和react中子组件分别如何向父组件传值

Posted qiqi105

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 和react中子组件分别如何向父组件传值相关的知识,希望对你有一定的参考价值。

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中子组件分别如何向父组件传值的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js中子组件向父组件传递信息。

Vue.js2.0中子组件修改父组件传递过来的props,并不影响父组件的原始数据

vue 子组件向父组件传值方法

vue 子组件向父组件传值方法

总结vue中组件相互传值的几种方式

react子组件向父组件传值