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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python3转换code128条形码的方法
2019/04/17 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
集体备课反思
2014/02/12 职场文书
总账会计岗位职责
2015/04/02 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python