vuejs父子组件之间数据交互详解
父子组件之间的数据交互遵循：
propsdown-子组件通过props接受父组件的数据
eventsup-父组件监听子组件$emit的事件来操作数据
示例
子组件的点击事件函数中$emit自定义事件
exportdefault{
name:'comment',
props:['issue','index'],
data(){
return{
comment:'',
}
},
components:{},
methods:{
removeComment:function(index,cindex){
this.$emit('removeComment',{index:index,cindex:cindex});
},
saveComment:function(index){
this.$emit('saveComment',{index:index,comment:this.comment});
this.comment="";
}
},
//hook
created:function(){
//getinitdata
}
}
父组件监听事件
父组件的methods中定义了事件处理程序
removeComment:function(data){
varindex=data.index,cindex=data.cindex;
varissue=this.issue_list[index];
varcomment=issue.comments[cindex];
axios.get('comment/delete/cid/'+comment.cid)
.then(function(resp){
issue.comments.splice(cindex,1);
});
},
saveComment:function(data){
varindex=data.index;
varcomment=data.comment;
varthat=this;
varissue=that.issue_list[index];
vardata={
iid:issue.issue_id,
content:comment
};
axios.post('comment/save/',data)
.then(function(resp){
issue.comments=issue.comments||[];
issue.comments.push({
cid:resp.data,
content:comment
});
});
//clearcommentinput
this.comment="";
}
},
注意参数的传递是一个对象
其实还有更多的场景需要组件间通信
官方推荐的通信方式
- 首选使用Vuex
- 使用事件总线:eventBus,允许组件自由交流
- 具体可见：$dispatch和$broadcast替换
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。