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 相关文章推荐
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
JavaScript 是什么意思
Sep 22 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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的session过期设置
2013/06/29 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
Python多线程原理与用法详解
2018/08/20 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python中可以声明变量类型吗
2020/06/18 Python
python中字符串的编码与解码详析
2020/12/03 Python
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
综合素质评价自我评价
2015/03/06 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
60句有关成长的名言
2019/09/04 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
MySQL 计算连续登录天数
2022/05/11 MySQL