父子组件之间的数据交互遵循：
props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据
示例
rush:js;">
export default {
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 () {
//get init data
}
}
父组件监听事件
代码如下:
父组件的methods中定义了事件处理程序
rush:js;">
removeComment: function(data) {
var index = data.index,cindex = data.cindex;
var issue = this.issue_list[index];
var comment = issue.comments[cindex];
axios.get('comment/delete/cid/'+comment.cid)
.then(function (resp) {
issue.comments.splice(cindex,1);
});
},saveComment: function(data) {
var index = data.index;
var comment = data.comment;
var that = this;
var issue =that.issue_list[index];
var data = {
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
});
});
//clear comment input
this.comment="";
}
},
注意参数的传递是一个对象
其实还有更多的场景需要组件间通信
官方推荐的通信方式
- 首选使用Vuex
- 使用事件总线:eventBus,允许组件自由交流
- 具体可见：nofollow" target="_blank" href="https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换">$dispatch 和 $broadcast替换
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
