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有关的小细节
Apr 02 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 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
mysql+php分页类(已测)
2008/03/31 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
Stop SQL Server
2007/06/21 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
技术总监岗位职责
2013/12/05 职场文书
大学秋游活动方案
2014/02/11 职场文书
公司担保书范文
2014/05/21 职场文书
绿色出行口号
2014/06/18 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014年护理部工作总结
2014/11/14 职场文书