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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python使用Matplotlib画饼图
2018/09/25 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python检测服务器端口代码实例
2019/08/31 Python
Python图像读写方法对比
2020/11/16 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
品德评语大全
2014/05/05 职场文书
升职感谢信
2015/01/22 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
学习委员竞选稿
2015/11/20 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
Python代码实现双链表
2022/05/25 Python