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实现轮显新闻标题链接
Aug 13 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js性能优化技巧
Nov 29 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue实现PC端分辨率适配操作
Aug 03 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP session会话的安全性分析
2011/09/08 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
lib.utf.js
2007/08/21 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
浅析JS抽象工厂模式
2017/12/14 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
浅谈python3中input输入的使用
2019/08/02 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
历史系自荐信范文
2013/12/24 职场文书
老公爱的承诺书
2014/03/31 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2014年机关工会工作总结
2014/12/19 职场文书