首页 > 其他 > 详细

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

时间:2018-06-21 15:57:25      阅读:236      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!