vuejs组件交互 - 01 - 父子组件之间的数据交互
2024-09-13 04:05:54
父子组件之间的数据交互遵循:
- props down - 子组件通过props接受父组件的数据
- events up - 父组件监听子组件$emit的事件来操作数据
示例
子组件的点击事件函数中$emit自定义事件
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
}
}
父组件监听事件
<comment v-show="issue.show_comments" :issue="issue" :index="index" @removeComment="removeComment" @saveComment="saveComment"></comment>
父组件的methods中定义了事件处理程序
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,允许组件自由交流
- 具体可见:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换
最新文章
- html5上传图片(一)一跨域上传
- 解决Mysql连接池被关闭 ,hibernate尝试连接不能连接的问题。 (默认mysql连接池可以访问的时间为8小时,如果超过8小时没有连接,mysql会自动关闭连接池。系统发布第二天访问链接关闭问题。
- 在Application中集成Microsoft Translator服务之使用http获取服务
- 【caffe】mnist训练日志
- IE 11 保护模式害惨了我
- linux redis 安装
- Sublime Text 快捷键
- 记一个python+sqlalchemy+tornado的一个高并发下,产生重复记录的bug
- josephus问题
- openstack私有云布署实践【10.1 计算nova - kxcontroller节点配置(科兴环境)】
- redis - 主从复制与主从切换
- Python 编程基础之高阶函数篇(一)
- codeforces 809E Surprise me!
- CentOS初次安装基本配置
- 王垠的40行代码,究竟diao在哪里
- LordPE修复从进程dump出来的内存文件
- datatables后端分页
- 20190316 Python - Pandas
- webpack处理媒体文件(图片/视频和音频)
- hdu-2844(完全背包+二进制优化模板)
热门文章
- 【ELK】【ElasticSearch】3.es入门基本操作
- 高通与MTK瓜分天下?手机处理器品牌分析
- Linux下Tomcat的启动、关闭
- CSS:如何学习 CSS?
- Linux的命名空间详解--Linux进程的管理与调度(二)
- Struts2再曝高危漏洞(S2-020补丁绕过)
- ExtJS 4.2 教程-04:数据模型
- Easyui 页面设置加载完成之后,满屏
- java.lang.NoClassDefFoundError: com.sap.conn.jco.JCo (initialization failure) java.lang.UnsatisfiedLinkError: no sapjco3 in java.library.path
- Visual Studio提示“无法启动IIS Express Web服务器”的解决方法 vs调试显示无法显示此页面 ,vs调试浏览器白页