vue父组件通过props如何向子组件传递方法详解


Posted in Javascript onAugust 16, 2017

前言

本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

vue 组件中的 this

vue 中 data/computed/methods 中 this的上下文是vue实例,需注意。

例如:

注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) 。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.myProp 将是 undefined

https://cn.vuejs.org/v2/api/#methods

父组件通过props向子组件传递方法

父组件调用子组件,通过绑定callback属性,将方法传给子组件:

App.vue 

<search-bar class="f-fr" placeholder="请输入名字" mutationName='resetListData' :callback="callback"/>

子组件通过props获取父组件传过来的callback方法:

SearchBar.vue

export default {
 name: 'SearchBar',
 data() {
  return {
   input: ''
  }
 },
 methods: {
  setName: function () {
   var input = this.input;
   if (input.trim() == '') {
    alert("empty");
   }
   else {
    Api.searchTest(this.input,this.success );
   }

  },
  success(responseData) {
   this.callback(responseData);
  },
 },
 props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}

通过 data

export default {
 ...
 data:function() {
 return {
  callback:function(responseData) {
  this.$store.commit('resetListData', responseData);
  }
 }
 },
 ...
};

此处callback以函数对象的方式,传入子组件,子组件调用的时候,this指向子组件

通过 methods

export default {
 ...
 methods: {
 callback(responseData) {
  this.$store.commit('resetListData', responseData);
 }
 }
};

此处callback是父组件的一个方法,个人理解,当父组件初始化时,该方法的this上下文就绑定了父组件的实例,因此当子组件调用callback 方法时,this指向父组件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
js友好的时间返回函数
Aug 24 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
详谈表单重复提交的三种情况及解决方法
Aug 16 #Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 #Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
vue绑定设置属性的多种方式(5)
Aug 16 #Javascript
You might like
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python字符串下标与切片及使用方法
2020/02/13 Python
python数据类型强制转换实例详解
2020/06/22 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
软件测试题目
2013/02/27 面试题
《影子》教学反思
2014/02/21 职场文书
节约用电标语
2014/06/17 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js