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 相关文章推荐
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
Vue SSR 组件加载问题
May 02 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
关于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
Sony CFR 320 修复改造
2020/03/14 无线电
php程序之die调试法 快速解决错误
2009/09/17 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
如何利用Python识别图片中的文字
2020/05/31 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
美国网上订购鲜花:FTD
2016/09/23 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
Java面向对象面试题
2016/12/26 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
教师评优事迹材料
2014/01/10 职场文书
立项申请报告范本
2015/05/15 职场文书
文艺节目主持词
2015/07/06 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技