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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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 auth_http类库进行身份效验
2009/03/19 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
CAD实训总结范文
2015/08/03 职场文书
清明节随笔
2015/08/15 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL