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

标签：双向   from   点击   状态   type   post   数据   pos   put   

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中子组件分别如何向父组件传值

标签：双向   from   点击   状态   type   post   数据   pos   put   

原文地址：https://www.cnblogs.com/qiqi105/p/9209390.html