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替换
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。