vuejs父子组件之间数据交互详解


Posted in Javascript onAugust 09, 2017

父子组件之间的数据交互遵循:

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,允许组件自由交流
  • 具体可见:$dispatch 和 $broadcast替换

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript检查表单数据是否改变的方法
Jul 30 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
js中less常用的方法小结
Aug 09 #Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
You might like
php实现快速排序的三种方法分享
2014/03/12 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
SVG实现时钟效果
2018/07/17 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JS实现随机点名器
2020/04/12 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python 复平面绘图实例
2019/11/21 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
化工专业推荐信范文
2013/11/28 职场文书
大学生创业感言
2014/01/25 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
2014年检验员工作总结
2014/11/19 职场文书
中秋节慰问信
2015/02/15 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL